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DISKLAIMER (DISCLAIMER) 


Penerbit tidak menjamin kebenaran dan keakuratan isi/informasi yang tertulis di 
dalam buku teks ini. Kebenaran dan keakuratan isi/informasi merupakan 


tanggung jawab dan wewenang dari penulis. 


Penerbit tidak bertanggung jawab dan tidak melayani terhadap semua komentar 
apapun yang ada didalam buku teks ini. Setiap komentar yang tercantum untuk 
tujuan perbaikan isi adalah tanggung jawab dari masing-masing penulis. 


Setiap kutipan yang ada di dalam buku teks akan dicantumkan sumbernya dan 
penerbit tidak bertanggung jawab terhadap isi dari kutipan tersebut. Kebenaran 
keakuratan isi kutipan tetap menjadi tanggung jawab dan hak diberikan pada 
penulis dan pemilik asli. Penulis bertanggung jawab penuh terhadap setiap 
perawatan (perbaikan) dalam menyusun informasi dan bahan dalam buku teks 
ini. 

Penerbit tidak bertanggung jawab atas kerugian, kerusakan atau 
ketidaknyamanan yang disebabkan sebagai akibat dari ketidakjelasan, 
ketidaktepatan atau kesalahan didalam menyusun makna kalimat didalam buku 
teks ini. 


Kewenangan Penerbit hanya sebatas memindahkan atau menerbitkan 
mempublikasi, mencetak, memegang dan memproses data sesuai dengan 


undang-undang yang berkaitan dengan perlindungan data. 


Katalog Dalam Terbitan (KDT) 

Multi Media Edisi Pertama 2013 

Kementerian Pendidikan & Kebudayaan 

Direktorat Jenderal Peningkatan Mutu Pendidik & Tenaga Kependidikan, th. 
2013: Jakarta 
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KATA PENGANTAR 


Puji syukur kami panjatkan kepada Tuhan yang Maha Esa atas tersusunnya 
buku teks ini, dengan harapan dapat digunakan sebagai buku teks untuk siswa 
Sekolah Menengah Kejuruan (SMK) Bidang Studi Keahlian Teknologi Informasi 
dan Komunikasi, Program Keahlian Teknik Komputer dan Informatika. 


Penerapan kurikulum 2013 mengacu pada paradigma belajar kurikulum abad 21 
menyebabkan terjadinya perubahan, yakni dari pengajaran (teaching) menjadi 
BELAJAR (learning), dari pembelajaran yang berpusat kepada guru (teachers- 
centered) menjadi pembelajaran yang berpusat kepada peserta didik (student- 
centered), dari pembelajaran pasif (pasive learning) ke cara belajar peserta didik 
aktif (active learning-CBSA) atau Student Active Learning-SAL. 


Buku teks Teknik Animasi 2 Dimensi ini disusun berdasarkan tuntutan 
paradigma pengajaran dan pembelajaran kurikulum 2013 diselaraskan 
berdasarkan pendekatan model pembelajaran yang sesuai dengan kebutuhan 
belajar kurikulum abad 21, yaitu pendekatan model pembelajaran berbasis 
peningkatan keterampilan proses sains. 


Penyajian buku teks untuk Mata Pelajaran Teknik Animasi 2 Dimensi ini disusun 
dengan tujuan agar supaya peserta didik dapat melakukan proses pencarian 
pengetahuan berkenaan dengan materi pelajaran melalui berbagai aktivitas 
proses sains sebagaimana dilakukan oleh para ilmuwan dalam melakukan 
eksperimen ilmiah (penerapan scientifik), dengan demikian peserta didik 
diarahkan untuk menemukan sendiri berbagai fakta, membangun konsep, dan 
nilai-nilai baru secara mandiri. 


Kementerian Pendidikan dan Kebudayaan, Direktorat Pembinaan Sekolah 
Menengah Kejuruan, dan Direktorat Jenderal Peningkatan Mutu Pendidik dan 
Tenaga Kependidikan menyampaikan terima kasih, sekaligus saran kritik demi 
kesempurnaan buku teks ini dan penghargaan kepada semua pihak yang telah 
berperan serta dalam membantu terselesaikannya buku teks siswa untuk Mata 
Pelajaran Teknik Animasi 2 Dimensi kelas Xl/Semester 2 Sekolah Menengah 
Kejuruan (SMK). 


Jakarta, 12 Desember 2013 
Menteri Pendidikan dan Kebudayaan 


Prof. Dr. Mohammad Nuh, DEA 
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GLOSSARIUM 


Tweening adalah proses membuat sebuah animasi pergerakan dengan cara 
memberikan perubahan pada bentuk atau posisi objek dengan menentukan 
keyframe awal dan akhir sehingga dapat terbentuk frame-frame baru. 


Objek adalah suatu tipe data seperti suara, gambar, teks, yang digunakan untuk 
mengontrol movie. Semua objek merupakan bagian dari suatu kelas. Objek pada 
Flash dapat berupa gambar yang nampak , hingga sesuatu yang abstrak (tidak 


nampak), misalnya tanggal, data, atau deteksi input dari mouse 


MP3 Salah satu berkas audio yang memiliki kompresi yang baik (meskipun 
bersifat lossy) sehingga ukuran berkas bisa memungkinkan menjadi lebih kecil. 
MP3 mengurangi bit yang diperlukan dengan menggunakan model 
psychoacoustic untuk menghilangkan komponen-komponen suara yang tidak 


terdengar oleh manusia 


WAV adalah file audio yang tidak terkompres sehingga seluruh sample audio 


disimpan semuanya di media penyimpanan dalam bentuk digital. 


JPG adalah jenis data yang dikembangkan oleh Joint Photographic Experts 
Assemble (JPEG) yang dijadikan standar untuk para fotografer profesional 


GIF adalah kepanjangan dari Graphics Interchange Format dan sama-sama 


memiliki kompresi seperti format gambar TIFF. 


fla adalah format asli pada Flash yang di dalamnya menyimpan layer — layer dan 


frame-frame . 
swf adalah file yang terbentuk jika anda melakukan test movie , .swf adalah 


sebuah file project yang menampilkan animasi yang ukurannya lebih kecil 


dibanding file animasi 2d lainya. 


vilPage 


Teknik Animasi 2 Dimensi 


PETA KEDUDUKAN BAHAN AJAR 


Peta kedudukan bahan ajar merupakan suatu diagram yang menjelaskan 
struktur mata pelajaran dan keterkaitan antar mata pelajaran dalam satu 
kelompok bidang studi keakhlian. Gambar 1 menjelaskan peta kedudukan bahan 
ajar untuk program studi keahlian Rekayasa perangkat lunak. Kelompok C1 
merupakan kelompok mata pelajaran wajib dasar bidang studi keahlian. C2 
merupakan kelompok mata pelajaran wajib dasar program keahlian dan C3 
merupakan kelompok mata pelajaran wajib paket keahlian. 


Kerja Proyek! 


Desai n Mu Itimedia. Teknik Pe ngolahart Te knik Pe ngolahan Teknik Pe ngambilan: 
: Interaktif : Audio : : Video : : Gambar Bergerak : 


| Desain : Pengolah : : Ne : : Teknik : Komposisi 
! Multimedia : : Citra Digital T MUtarUASN : Animasi 30: INI : Foto Digital : 


Simulasi 
Digital 





Gambar 1. Peta Kedudukan Bahan Ajar Kelompok C3 Mata Pelajaran Teknik 
Animasi 2D 
Sementara itu peta konsep mata pelajaran menjelaskan struktur urutan 
kegiatan belajar dan topik materi pelajaran. Gambar 2 dibawah ini menjelaskan 
peta konsep mata pelajaran Teknik Animasi 2D Untuk kelas XI semester 2. 
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h ! aa jenis jenis format produk animasi 2D 
PANGAN DIAN 4 5, format produk animasi 2D 
“LI TA, ! | pembuatan produk animasi 2D 


penentuan frame kunci |- B1 Animasi Tweening 
pembuatan animasi tweening 
| | — pengertian audio pada animasi 2D 
ja Pemberian efek audio pada animasi 2D |- 
| pemberian efek audio pada animasi 2D 
jenis-jenis obyek aa 
| (ed Pembuatan Obyek pada aplikasi animasi 2D ) TN 
proses pembuatan obyek | pengertian scene pada aplikasi animasi 2D 
3 Penggunaan Scene j: 
| Penggunaan scene pada aplikasi 2D 


Gambar 2. Peta Konsep Mata Pelajaran Teknik Animasi 2D Semester 2 Kelas XI 
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BAB | PENDAHULUAN 
A. Diskripsi. 

Teknik Animasi 2D adalah salah satu mata pelajaran wajib paket keahlian 
Multimedia. Berdasarkan struktur kurikulum mata pelajaran Teknik Animasi 2D 
disampaikan di kelas XI semester 1 dan semester 2 masing-masing 4 jam 
pelajaran. Untuk semester 1 topik materi pembelajaran menekankan pada 
prinsip-prinsip dasar animasi, animasi tradisional, animasi komputer, animasi 
stopmotion, storyboard, gambar clean up dan sisip, gambar kunci animasi dan 
teknik animasi frame. Sedangkan untuk semester 2 topik materi pembelajaran 
menekankan pada animasi tweening, Pembuatan obyek pada aplikasi animasi Z 
dimensi, penggunaan scene, pemberian efek audio pada animasi dan format 
produk animasi 2 Dimensi. 

Teknik animasi 2D adalah jenis animasi yang memiliki sifat flat secara 
visual. Bila dilihat dari teknis pembuatannya terdapat dua cara, yaitu manual dan 
komputer. teknik animasi manual atau yang biasa disebut dengan cell animation 
adalah teknik animasi yang paling lama usianya. Teknik animasi ini 
memungkinan animator untuk membuat gambar pada lembaran celuloid (lembar 
trasparan) yang berlapis-lapis. karena kemajuan teknologi sekarang animator 
tidak lagi membuat animasi tradisional ini dengan lembaran celuloid, tapi bisa 
dengan menggunakan kertas biasa yang nanti akan di pindai (scan) lalu di warna 
dengan menggunakan komputer. Teknik animasi 2D komputer adalah teknis 
animasi yang dibuat dengan menggunakan bantuan komputer (software) dan 
tetap mengandalkan kemampuan menggambar lembar demi lembar. Sehingga 
yang membedakan antara traditional animation dengan 2D CGI (Computer 
generated imagery) adalah medianya. 

Pembelajaran Teknik Animasi 2D ini menggunakan metode pendekatan 
scientifik. Dalam pendekatan ini praktikum atau eksperimen berbasis sains 
merupakan bidang pendekatan ilmiah dengan tujuan dan aturan khusus, dimana 
tujuan utamanya adalah untuk memberikan bekal ketrampilan yang kuat dengan 
disertai landasan teori yang realistis mengenai fenomena yang akan kita amati. 
Ketika suatu permasalahan yang hendak diamati memunculkan pertanyaan- 
pertanyaan yang tidak bisa terjawab, maka metode eksperimen ilmiah 
hendaknya dapat memberikan jawaban melalui proses yang logis. Proses-proses 


dalam pendekatan scientifik meliputi beberapa tahapan (gambar 3) yaitu: 
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mengamati, hipotesis atau menanya, mengasosiasikan atau eksperimen, 
mengumpulkan atau analisa data dan mengkomunikasikan. Proses belajar 
pendekatan eksperimen pada hakekatnya merupakan proses berfikir ilmiah untuk 
membuktikan hipotesis dengan logika berfikir. 





Gambar 3. Diagram Proses Metode Scientifik-Eksperimen Ilmiah 


B. Prasyarat. 

Berdasarkan peta kedudukan bahan ajar, mata pelajaran teknik animasi 
memiliki keterkaitan dengan mata pelajaran yang lain tetapi bukan sebagai 
prasayarat untuk mengikuti mata pelajaran yang. Sementara itu untuk dapat 
mempelajari teknik animasi 2D dengan baik maka dibutuhkan satu set peralatan 
gambar utuk animasi dan satu set perangkat komputer yang berfungsi dengan 
baik. 
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C. Petunjuk Penggunaan. 

Buku pedoman siswa ini disusun berdasarkan kurikulum 2013 yang 
mempunyai ciri khas pemnggunaan metode scientifik. Buku ini terdiri dari dua 
bab yaitu bab 1 pendahuluan dan bab 2 pembelajaran. Dalam bab pendahuluan 
beberapa yang harus dipelajari peserta didik adalah diskripsi mata pelajaran 
yang berisi informasi umum, rasionalisasi dan penggunaan metode scientifik. 
Selanjutnya pengetahuan tentang persyaratan, tujuan yang diharapkan, 
kompetensi inti dan dasar yang akan dicapai serta test kemampuan awal. 

Bab 2 menuntun peserta didik untuk memahami diskripsi umum tentang 
topik yang akan dipelajari dan rincian kegiatan belajar sesuai dengan kompetensi 
dan tujuan yang akan dicapai. Setiap kegiatan belajar terdiri dari tujuan dan 
uraian materi topik pembelajaran, tugas serta test formatif. Uraian pembelajaran 
berisi tentang diskripsi pemahaman topik materi untuk memenuhi kompetensi 
pengetahuan. Uraian pembelajaran juga menjelaskan diskripsi unjuk kerja atau 
langkah-langkah logis untuk memenuhi kompetensi skill. 

Tugas yang harus dikerjakan oleh peserta didik dapat berupa tugas 
praktek, eksperimen atau pendalaman materi pembelajaran. Setiap tugas yang 
dilakukan melalui beberapa tahapan scientifik yaitu : 1) melakukan praktek 
sesuai dengan unjuk kerja 2) melakukan pengamatan setiap tahapan unjuk kerja 
3) mengumpulkan data yang dihasilkan setiap tahapan 4) menganalisa hasil data 
menggunakan analisa diskriptif 5) mengasosiasikan beberapa pengetahuan 
dalam uraian materi pembelajaran untuk membentuk suatu kesimpulan 5) 
mengkomunikasikan hasil dengan membuat laporan portofolio. Laporan tersebut 


merupakan tagihan yang akan dijadikan sebagai salah satu referensi penilaaian. 


D. Tujuan Akhir. 

Setelah mempelajari uraian materi dalam bab pembelajaran dan kegiatan 
belajar diharapkan peserta didik dapat memiliki kompetensi sikap, pengetahuan 
dan ketrampilan yang berkaitan dengan materi: 

v animasi tweening 

v“ Pembuatan obyek pada aplikasi animasi 2 dimensi 
“ penggunaan scene 

“ pemberian efek audio pada animasi 


v“ format produk animasi 2 Dimensi 


3|Page 





Teknik Animasi 2 Dimensi 





E. Kompetensi Inti Dan Kompetensi Dasar 

1. Kompetensi Inti 1 : Menghayati dan mengamalkan ajaran agama yang 
dianutnya. 

Kompetensi Dasar : 

1.1. Memahami nilai-nilai keimanan dengan menyadari hubungan 
keteraturan dan kompleksitas alam dan jagad raya terhadap kebesaran 
Tuhan yang menciptakannya 

1.2. Mendeskripsikan kebesaran Tuhan yang menciptakan berbagai sumber 
energi di alam 

1.3. Mengamalkan nilai-nilai keimanan sesuai dengan ajaran agama dalam 
kehidupan sehari-hari. 

2. Kompetensi Inti 2: Menghayati dan Mengamalkan perilaku jujur, disiplin, 
tanggung jawab, peduli (gotong royong, kerjasama, toleran, damai), santun, 
responsif dan proaktif dan menunjukan sikap sebagai bagian dari solusi atas 
berbagai permasalahan dalam berinteraksi secara efektif dengan lingkungan 
sosial dan alam serta dalam menempatkan diri sebagai cerminan bangsa 
dalam menempatkan diri sebagai cerminan bangsa dalam pergaulan dunia. 
Kompetensi Dasar: 

2.1. Menunjukkan perilaku ilmiah (memiliki rasa ingin tahu, objektif, jujur teliti, 
cermat, tekun, hati-hati, bertanggung jawab, terbuka, kritis, kreatif, 
inovatif dan peduli lingkungan) dalam aktivitas sehari-hari sebagai wujud 
implementasi sikap dalam melakukan percobaan dan berdiskusi 

2.2. Menghargai kerja individu dan kelompok dalam aktivitas sehari-hari 
sebagai wujud implementasi melaksanakan percobaan dan melaporkan 
hasil percobaan 

3. Kompetensi Inti 3: Memahami, menerapkan dan menganalisis pengetahuan 
faktual, konseptual dan prosedural berdasarkan rasa ingin tahunya tentang 
ilmu pengetahuan, teknologi, seni, budaya, dan humaniora dalam wawasan 
kemanusiaan, kebangsaan, kenegaraan, dan peradaban terkait penyebab 
fenomena dan kejadian dalam bidang kerja yang spesifik untuk memecahkan 
masalah. 

Kompetensi Dasar: 

3.1. Memahami animasi stop motion 


3.2. Memahami Prinsip-prinsip dasar animasi 
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3.3. Memahami animasi tradisional 

3.4. Memahami komponen-komponen storyboard. 
3.5. Memahami konsep gambar clean up dan sisip 
3.6. Memahami konsep gambar kunci animasi 
3.7. Memahami teknik animasi frame by frame 


4. Kompetensi Inti 4: Mengolah, menalar, dan menyaji dalam ranah konkret 
dan ranah abstrak terkait dengan pengembangan dari yang dipelajarinya di 
sekolah secara mandiri, dan mampu melaksanakan tugas spesifik dibawah 
pengawasan langsung. 

Kompetensi Dasar: 
4.1. Memahami animasi tweening 
4.2. Memahami Pembuatan obyek pada aplikasi animasi 2 dimensi 
4.3. Memahami penggunaan scene 
4.4. Memahami pemberian efek audio pada animasi 
4.5. Memahami format produk animasi Z2 Dimensi 


F. Cek Kemampuan Awal 
« 1. Jelaskan pengertian dari tweening ? 
7 2 Jelaskan fungsi utama tweening ? 
3. Jelaskan pengertian dan fungsi sound pada flash? 
4 Jelaskan beberapa kemampuan yang dapat dihasilkan dari 
fasilitas pengolah suara milik flash ? 
5. Sebutkan dan jelaskan Format file sound yang didukung oleh 
flash? 
6. Jelaskan macam — macam format ANIMASI 2D dengan 


menggunakan aplikasi Flash 
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BAB II PEMBELAJARAN 
A. Diskripsi 

Teknik Animasi 2D adalah salah satu mata pelajaran wajib paket keahlian 
Multimedia. Berdasarkan struktur kurikulum mata pelajaran Teknik Animasi 2D 
disampaikan di kelas XI semester 1 dan semester 2 masing-masing 4 jam 
pelajaran. Untuk semester 1 topik materi pembelajaran menekankan pada 
prinsip-prinsip dasar animasi, animasi tradisional, animasi komputer, animasi 
stopmotion, storyboard, gambar clean up dan sisip, gambar kunci animasi dan 
teknik animasi frame. Sedangkan untuk semester 2 topik materi pembelajaran 
menekankan pada animasi tweening, Pembuatan obyek pada aplikasi animasi 2 
dimensi, penggunaan scene, pemberian efek audio pada animasi dan format 
produk animasi 2 Dimensi. 

Teknik animasi 2D adalah jenis animasi yang memiliki sifat flat secara 
visual. Bila dilihat dari teknis pembuatannya terdapat dua cara, yaitu manual dan 
komputer. teknik animasi manual atau yang biasa disebut dengan cell animation 
adalah teknik animasi yang paling lama usianya. Teknik animasi ini 
memungkinan animator untuk membuat gambar pada lembaran celuloid (lembar 
trasparan) yang berlapis-lapis. karena kemajuan teknologi sekarang animator 
tidak lagi membuat animasi tradisional ini dengan lembaran celuloid, tapi bisa 
dengan menggunakan kertas biasa yang nanti akan di pindai (scan) lalu di warna 
dengan menggunakan komputer. Teknik animasi 2D komputer adalah teknis 
animasi yang dibuat dengan menggunakan bantuan komputer (software) dan 
tetap mengandalkan kemampuan menggambar lembar demi lembar. Sehingga 
yang membedakan antara traditional animation dengan 2D CGI (Computer 
generated imagery) adalah medianya. 


B. Kegiatan Belajar 
Kegiatan belajar menjelaskan tentang aktifitas pembelajaran yang 
dilakukan siswa, meliputi mempelajari uraian materi, mengerjakan test formatif 


dan tugas atau eksperimen dari proses mengamati sampai menyusun laporan. 
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a. Tujuan Pembelajaran. 


Setelah mengikuti kegiatan belajar 1 diharapkan peserta didik dapat: 
“ Memahami teknik animasi tweening 


“ Membuat animasi 2 dimensi menggunakan teknik tweening 


b. Uraian materi. 
Animasi Motion Tween 
1. Pengertian Tweening 
Tweening adalah proses membuat sebuah animasi pergerakan dengan cara 
memberikan perubahan pada bentuk atau posisi objek dengan menentukan 
keyframe awal dan akhir sehingga dapat terbentuk frame-frame baru. Fungsi 
utama tweening adalah untuk menggerakkan objek dari satu titik ke titik lainnya. 
Animasi motion tween digunakan apabila kita ingin membuat gerakan 
animasi yang teratur. Animasi ini sangat mengurangi waktu karena kita tidak 
perlu membuat animasi secara frame per frame. Sebaliknya hanya membuat 
frame awal dan frame akhir saja. Dua alasan utama mengapa Animasi motion 
tween sangat baik yaitu karena mengurangi pekerjaan mengambar dan 


meminimalkan ukuran file karena isi dari setiap frame tidak perlu disimpan. 


2. Cara Kerja Tweening 

Cara kerja tweening adalah dengan cara menentukan dua poin keadaan 
pada objek awal dan akhir, sedangkan macromedia flash membuat rangkaian 
gerakan diantaranya. Animasi yang dihasilkan menggunakan metode ini adalah 
gerakan yang halus, perubahan letak, ukuran, rotasi, bentuk maupun warna. 

Prinsip kerja dari animasi motion tween adalah membuat objek pada frame 
pertama dan terakhir saja, sedangkan frame-frame diantaranya akan dibuat 
secara otomatis. Objek yang dapat diaplikasikan dalam motion tween adalah 
objek instance (simbol), group dan teks. Animasi motion tween biasa digunakan 
untuk membuat animasi objek bergerak, berputar, dan mengubah ukuran (skala). 
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Untuk menggerakkan animasi berupa obyek yang bergerak , langkah tercepat 
yang dapat dilakukan adalah dengan menggunakan Motion Tween. Dengan 
menggunakan Motion Tween, kita hanya menentukan posisi pertama dan posisi 
terkahir obyek dan selanjutnya kita gerakan dengan Motion Tween. Langkah- 


langkah membuat animasi tweening sederhana : 


1. Buka halaman baru File » New - File Flash - OK 

2. Pada menu Propeties tentukan size atau ukuran stage 550 x 200 pixel, warna 
Background Putih dan jumlah Frame per detik 12. 

3. Ubahlah nama untuk Layer 1 dengan nama layer “Bola”. 


4. Seleksi drame 1 pada layer Bola 





Gambar 4. Seleksi Drame 1 pada Layer bola 


5. Dengan menggunakan Oval Tool buatlah lingkaran seperti pada latihan 


animasi frame by frame dan le takkan gambar bola di stage sebelah kiri. 





Gambar 5. Menggambar menggunakan Oval Tool 


6. Klik kanan frame 8 layer Bola dan pilih Insert Keyframe 
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Insert Karyfrarrve 
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Gambar 6. Frame 8 layer bola 


7. Drag gambar bola yang berada di frame 8, geser ke sebelah kanan stage. 
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Gambar 7. Bola yang berada di frame 8, geser ke kanan stage 


8. Klik kanan di frame 1 dan 8, pilih Create Motion Tween 









































Crante Motion Tan 


Kreate Shape Iween 





Gambar 8. Create Motion Tween 


9. Keadaan frame setelah ditambah Motion Tween 
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Gambar 9. Motion Tween 


10. Cek hasil Movie dengan menekan Ctrl 4 Enter 


T Unetes:3 Pee aa 


kls Yew Control Debug 





Gambar 10. Hasil Movie Iween 
Bandingkan dengan hasil animasi frame to frame. Dari segi hasil, tidak ada 
perbedaan, tetapi dari segi proses, penggunaan animasi dengan motion tween 
lebih mudah dan praktis karena kita hanya menentukan posisi awal dan posisi 


akhir dari objek yang akan digerakkan. 


c. Rangkuman 

TIweening adalah proses membuat sebuah animasi pergerakan dengan 
cara memberikan perubahan pada bentuk atau posisi objek dengan menentukan 
keyframe awal dan akhir sehingga dapat terbentuk frame-frame baru. Fungsi 
utama tweening adalah untuk menggerakkan objek dari satu titik ke titik lainnya. 
Animasi motion tween digunakan apabila kita ingin membuat gerakan animasi 
yang teratur. Animasi ini sangat mengurangi waktu karena kita tidak perlu 
membuat animasi secara frame per frame. Dua alasan utama mengapa Animasi 
motion tween sangat baik yaitu karena mengurangi pekerjaan mengambar dan 


meminimalkan ukuran file karena isi dari setiap frame tidak perlu disimpan. 
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d. Tugas : Membuat animasi gerakan box menggunakan teknik tweening 


Dalam kegiatan ini setiap peserta didik membuat animasi gerakan box 
menggunakan teknik tweening menggunakan software macromedia flash atau 
adobe flash. Berdasar uraian materi diatas lakukan langkah-langkah berikut: 
« A11. Buka file baru pada software flash atau Ctrl--N. 
P 1.2. Buatlah animasi gerakan box menggunakan teknik tweening 
sesuai langkah-langkah seperti dalam uraian diatas 
1.3. Demonstrasikan hasil animasi gerakan box yang telah dibuat 
siswa di depan kelas 


e. Test Formatif. 
Dalam test ini setiap peserta didik membaca dengan cermat dan teliti setiap butir 
soal dibawah ini. Kemudian berdasarkan uraian materi diatas tulislah jawabannya 
pada lembar jawaban test formatif yang telah disediakan. 

«9 Jelaskan pengertian dari tweening ? 
7 Jelaskan fungsi utama tweening ? 


Jelaskan mengapa Animasi motion tween sangat baik? 


Dn 


Jelaskan prinsip kerja dari animasi motion tween 


f. Lembar Jawaban Test Formatif (LJ). 


LJ- 01 : pengertian dari tweening 
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LJ- 03 : mengapa Animasi motion tween sangat baik 
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g. Lembar Kerja Peserta Didik. 
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a. Tujuan Pembelajaran. 


Setelah mengikuti kegiatan belajar 2 diharapkan peserta didik dapat: 
“ Memahami teknik animasi tweening 


“Membuat animasi 2 dimensi menggunakan teknik tweening 


b. Uraian materi. 
1. Pengertian Animasi Shape Tweening 

Shape Tween adalah perubahan bentuk dari suatu objek ke objek lain. Untuk 
Shape Tween objek yang dianimasikan harus berjenis Shape, untuk ukuran file 
yang dihasilkan Shape Tween lebih besar dibandingkan motion Tween. 

Shape tweening biasa digunakan untuk membuat animasi perubahan 
bentuk. Sebagai contoh di dalam frame awal terdapat obyek bintang, kemudian 
di dalam frame akhir terdapat obyek bulan sabit. Dengan menggunakan shape 
tweening, program akan menganimasi dan menentukan transisi perubahan 
bentuk dari bintang menjadi bulan sabit secara otomatis. Yang perlu 
diperhatikan, shape tweening hanya dapat diterapkan untuk menganimasi obyek 
shape. Jadi tidak untuk melakukan Shape tween untuk group, symbol, atau teks 

Untuk hasil yang baik biasanya digunakan satu shape. Jika Anda 
menggunakan banyak shape, semuanya harus dalam layer yang sama.Hal ini 
akan memudahkan jika ingin melakukan perubahan. Shape tweening juga 


memperbolehkan untuk mengubah warna. 

2. Membuat animasi Motion Shape 
Disini akan ditunjukkan bagaimana cara pembuatan animasi Motion Shape 
1. Buka file baru atau Ctrl-N 


2. Pada Frame pertama kita buat sebuah objek lingkaran dengan 


menggunakan Oval Tool. 
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Gambar 11. Objek Lingkaran menggunakan Oval Tool 


3. Kemudian pada frame 20 buatlah sebuah keyframe. 

4. Setelah itu pada frame 20 yang telah kita buat sebuah key frame, kita 
hapus dengan cara klik frame 20 kemudian tekan Delete pada keyboard. 

5. Setelah keyframenya kosong kita buat sebuah objek persegi pada frame 
20 tersebut. 


Untitled-2” 
Timeline Ha Scene 1 


ih 





Gambar 12. Objek Persegi pada Frame 20 


6. Klik frame 1 kemudian buka panel properties, pada pilihan animasi tween 


pilih shape. 
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Gambar 13. Animasi Iween 
7. Kemudian tekan Enter untuk melihat hasilnya 


c. Rangkuman 

Shape Iween adalah perubahan bentuk dari suatu objek ke objek lain. 
Untuk Shape Iween objek yang dianimasikan harus berjenis Shape, untuk 
ukuran file yang dihasilkan Shape Iween lebih besar dibandingkan motion 
Iween. Shape tweening biasa digunakan untuk membuat animasi perubahan 
bentuk. Sebagai contoh di dalam frame awal terdapat obyek bintang, kemudian 
di dalam frame akhir terdapat obyek bulan sabit. Dengan menggunakan shape 
tweening, program akan menganimasi dan menentukan transisi perubahan 
bentuk dari bintang menjadi bulan sabit secara otomatis. Yang perlu 
diperhatikan, shape tweening hanya dapat diterapkan untuk menganimasi obyek 
shape. Jadi tidak untuk melakukan Shape tween untuk group, symbol, atau teks 
Untuk hasil yang baik biasanya digunakan satu shape. Jika Anda menggunakan 
banyak shape, semuanya harus dalam layer yang sama.Hal ini akan 
memudahkan jika ingin melakukan perubahan. Shape tweening juga 


memperbolehkan untuk mengubah warna. 
d. Tugas : Membuat animasi sederhana menggunakan Shape Tweening 


Dalam kegiatan ini setiap peserta didik membuat animasi sederhana 
menggunakan Shape Iweening menggunakan software macromedia flash atau 
adobe flash. Berdasar uraian materi diatas lakukan langkah-langkah berikut: 
«& 11. Buka file baru pada software flash atau Ctrl-N. 
7 1.2. Buatlah animasi sederhana menggunakan Shape TIweening 
sesuai langkah-langkah seperti dalam uraian diatas 
1.3.  Presentasikan hasil animasi yang telah dibuat siswa di depan 
kelas 
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e. Test Formatif. 
Dalam test ini setiap peserta didik membaca dengan cermat dan teliti setiap butir 
soal dibawah ini. Kemudian berdasarkan uraian materi diatas tulislah jawabannya 
pada lembar jawaban test formatif yang telah disediakan. 
«9 1. Jelaskan pengertian dari Shape Iween ? 
7 2. Jelaskan hal apa saja yang harus diperhatikan dalam membuat 
animasi shape tweening ? 
3. Sebutkan langkah-langkah dalam membuat animasi shape 


tweening? 


f. Lembar Jawaban Test Formatif (LJ). 


LJ- 01 : Pengertian dari Shape Tween 


LJ- 02 : hal-hal yang harus diperhatikan dalam membuat animasi shape 


tweening 
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g. Lembar Kerja Peserta Didik. 
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a. Tujuan Pembelajaran. 


Setelah mengikuti kegiatan belajar 3 diharapkan peserta didik dapat: 
“ Memahami teknik animasi tweening 


“ Membuat animasi 2 dimensi menggunakan teknik tweening 


b. Uraian materi. 


1. Pengertian Masking 


Mask merupakan fasilitas di flash yang mampu membuat objek gambar 
ditampilkan sesuai dengan objek shape yang kita kehendaki. Di samping motion 
tween, mask merupakan tehnik yang harus dikuasai. Karena di dalam 
pengembangannya nanti kita akan dapat membuat animasi yang menarik dari 
variasi mask. Masking adalah animasi yang menyembunyikan atau menutupi 
suatu objek dengan objek lain, sehinga objek yang menutupi terlihat transparan 
dan menyatu dengan objek yang ditutupi. 

Mask artinya adalah penutup mempunyai fungsi sesuai dengan namanya 
yaitu untuk menutupi suatu layer. Mask dapat diterapkan kepada suatu layer dan 
layer yang sudah dikenai mask bisa berfungsi untuk menutupi layer dibawahnya. 
Prinsip kerja dari Animasi Mask adalah menampilkan bidang yang tertutup dan 
menyenbunyikan bidang yang terbuka. Fungsi Masking dalam Animasi : sama 
seperti fungsi topeng dalam arti yang sebenarnya: digunakan untuk menutupi 
bagian-bagian objek yang ingin ditutupi dan hebatnya yang menutupinya tidak 
akan terlihat juga. 

Layer adalah tempat untuk meletakkan gambar/image yang telah kita buat 
untuk kemudian diolah susunan waktu (timing)nya. Seadangkan masking layer 
adalah tempat ntuk meletakkan gambar yang akan di olah menggunakan 
masking, disini layer masking terdapat di dalam layer lembar kerja yang biasa 
kita gunakan untuk membuat animasi. Membuat layer masking dengan cara, 


double klik objek yang akan kita beri mask. 
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2. Cara Kerja Masking 


Prinsip kerja masking adalah menampilkan bidang yang tertutup dan 
menyembunyikan bidang yang terbuka. Pada dasarnya animasi making terjadi 
dikarenakan penumpukan dua buah objek yang dibuat dalam layer yang 
berbeda, layer utama ditutup layer objek dengan bantuan masking, sehingga 
objek utama hanya terlihat seukuran objek penutup atau objek yang dijadikan 
masking. Atau dengan kata lain, objek yang terlihat adalah objek yang saling 
bertumpukan sedangkan objek yang lain disembunyikan. 


3. Membuat animasi Masking 


Pada animasi masking Kali ini kita akan belajar teks yang lebih hidup 
menggunakan animasi masking. 


1. Buat sebuah movie flash baru. 


2. Buat tulisan GARDU MEDIA dengan menggunkan Text Tool. 
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Gambar 14. Text Tool 
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3. Klik frame 15 lalu klik menu Insert » Keyframe. 
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Gambar 15. Menu insert - Keyframe 


4. Klik menu Insert - Layer untuk membuat layer baru sehingga terdapat dua 
layer dalam timeline. 
5. Klik Layer 2 untuk berpindah dari Layer 1. 


6. Buat objek, misalnya pada tutorial ini kit buat agak bervariasi. 





File Edit View Insert Modify Text Commands Control Debug Window Help 


y '33 di Id 15 120p 13 « 
cs E Scene i Workspace 8 &, 100 


NS EGANYOKKN As Oren 


» 


1. 
- 


. 
Sos 





Gambar 16. Sebuah objek yang di masukkan ke masking 
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7. Klik frame 15 Layer 2, kemudian klik Insert » Keyframe dan pindahkan objek di 


samping kanan tulisan. Lalu pada frame di antara 1 dan 15 klik Insert - Create 
Motion TI ween. 
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Gambar 17. Create Motion Tween 


8. Klik kanan pada layer 2 dan pilih Mask. 
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Gambar 18. Klik kanan pada layer 2 dan pilih Mask 
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Gambar 19. Hasil masking 


9. Tet movie dengan menekan Ctrl - Enter. Maka akan terlihat tulisan yang 
ditutupi oleh masking dengan objek yang sudh kita buat. Pada dasarnya masking 


adalah ada objek yang dibuat dan ada objek yang akan dimasking. 
10. Lalu buat variasi dengan membuat layer 3. Copy paste tulisan yang sudah 


dibuat dari layer 1. Lalu ubah warnanya menjadi putih. Letakkan layer 3 di bawah 


layer 2. 
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Gambar 20. Tampilan gambar setelah di copy paste 


11. Klik kanan pada layer 2 dan pilih Mask. 






Hi 
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Gambar 21. Klik kanan pada layer 2 dan pilih Mask 
12. Tet movie dengan menekan Ctrl - Enter. 


Kita bisa membuat variasi yang lain. Sampai jumpa di animasi masking 


berikutnya. 
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c. Rangkuman 

Mask merupakan fasilitas di flash yang mampu membuat objek gambar 
ditampilkan sesuai dengan objek shape yang kita kehendaki. Masking adalah 
animasi yang menyembunyikan atau menutupi suatu objek dengan objek lain, 
sehinga objek yang menutupi terlihat transparan dan menyatu dengan objek 
yang ditutupi. Mask dapat diterapkan kepada suatu layer dan layer yang sudah 
dikenai mask bisa berfungsi untuk menutupi layer dibawahnya. Prinsip kerja dari 
Animasi Mask adalah menampilkan bidang yang tertutup dan menyenbunyikan 
bidang yang terbuka. Fungsi Masking dalam Animasi : sama seperti fungsi 
topeng dalam arti yang sebenarnya: digunakan untuk menutupi bagian-bagian 
objek yang ingin ditutupi dan hebatnya yang menutupinya tidak akan terlihat 
juga. Prinsip kerja masking adalah menampilkan bidang yang tertutup dan 
menyembunyikan bidang yang terbuka. Pada dasarnya animasi masking terjadi 
dikarenakan penumpukan dua buah objek yang dibuat dalam layer yang 
berbeda, layer utama ditutup layer objek dengan bantuan masking, sehingga 
objek utama hanya terlihat seukuran objek penutup atau objek yang dijadikan 
masking. Atau dengan kata lain, objek yang terlihat adalah objek yang saling 
bertumpukan sedangkan objek yang lain disembunyikan. 


d. Tugas : Membuat animasi sederhana menggunakan Masking 


Dalam kegiatan ini setiap peserta didik membuat animasi sederhana 
menggunakan masking menggunakan software macromedia flash atau adobe 
flash. Berdasar uraian materi diatas lakukan langkah-langkah berikut: 
«& 11. Buka file baru pada software flash atau Ctrl-N. 
P 1.2. Buatlah animasi sederhana menggunakan masking sesuai 
langkah-langkah seperti dalam uraian diatas 
1.3.  Presentasikan hasil animasi yang telah dibuat siswa di depan 
kelas 
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e. Test Formatif. 
Dalam test ini setiap peserta didik membaca dengan cermat dan teliti setiap butir 
soal dibawah ini. Kemudian berdasarkan uraian materi diatas tulislah jawabannya 
pada lembar jawaban test formatif yang telah disediakan. 

«& 1. Jelaskan pengertian masking ? 
P 2. Jelaskan fungsi dari animasi masking? 


3. Jelaskan Prinsip kerja animasi masking? 


f. Lembar Jawaban Test Formatif (LJ). 


LJ- 01 : pengertian masking 
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LJ- 02 : fungsi dari animasi masking 
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g. Lembar Kerja Peserta Didik. 
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a. Tujuan Pembelajaran. 

Setelah mengikuti kegiatan belajar 4 diharapkan peserta didik dapat: 
“ Memahami teknik animasi tweening 
“ Membuat animasi 2 dimensi menggunakan teknik tweening 


b. Uraian materi. 
Animasi motion guide 

Animasi motion guide adalah animasi yang mempunyai gerakan sesuai 
dengan jalur yang kita buat. Animasi ini merupakan lanjutan dari animasi motion 
tween. Animasi ini sangat cocok digunakan untuk jenis animasi yang 
membutuhkan ketelitian dalam pergerakan yang dikehendaki atau sesuai 


keinginan pembuat animasi. 


Membuat animasi motion guide 
Di bawah ini akan ditunjukkanproses pembuatan animasi motion guide : 


1. Buka file baru atau Ctrl-N 

2. Kemudian kita pilih Oval tool (O) pada toolbox dan kita mulai membuat 
objek lingkaran pada stage dengan mengklik dan drag, jangan lupa warna 
riil objek balok harus berbeda dari warna background stage. 
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Gambar 22. Membuat Animasi Motion Guide 


3. Kemudian klik kanan di frame ke-1, pilih Create motion tween 
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Gambar 23. Create Motion Tween 


4. Pada frame ke-10 klik kanan kita pilih Keyframe,, kemudian kita 


geser lingkaran ke kanan sehingga tampak seperti pada gambar 


Z 2m x 1 oo - 
II .. (3 Pada frame 40 


Insert Kevirame 
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digeser ke kanan 


Gambar 24. Frame 40 insert Keyframe 


5. Kemudian klik kanan layer 1 kemudian pilih Add Motion Guide 
maka akan muncul layer baru seperti tampak pada gambar. 


Pemai lay 
baru sebaga 


layar guade 





Gambar 25. Pilih Layer baru sebagai Layer Guide 


6. Kemudian dengan layer guide masih terseleksi kita pilih Pencil Tool untuk 


membuat jalur yang akan menjadi lintasan animasi dari lingkaran. 
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Gambar 26. Lintasan yang kita buat dengan Pencil Tool 


7. Agar objek lingkaran dapat bergerak sesuai jalur, maka tengah objek 


haruslah berada di tengah jalur. 
8. Oleh karena itu, klik frame 1 layer 1, Kemudian pilih Free Transform Tool 


agar bulatan tengah objek terlihat. Kemudian pindahkan objek sampai 


lingkaran tengah objek berada di ujung awal jalur. 


ag 1 8 H a 2 “ s F - “ 3 2 
La m g Pasisa Irame | layer 1 
Hanan) — terselekai 


, Hulatan tengah objek 
— lepal berada pada 


ujung awal jalur 





Gambar 27. Free Transform Tool 
9. Kemudian klik frame 40 layer 1, Kemudian pilih Free Transform Tool 


agar bulatan tengah objek terlihat. Kemudian pindahkan objek sampai 


lingkaran tengah objek berada di ujung akhir jalur. 
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Posisi frame 40 layer JI 
berselekai 





Bulatan tengah objek 
- bepat berada pada 
ujung akbar jalar 





Gambar 28. Cara membuat bulatan tengah objek 
10.Kemudian tekan Enter untuk melihat hasilnya. 
Catatan : dalam Motion Guide, tengah objek harus berada di tengah (jalur). 


c. Rangkuman 

Animasi motion guide adalah animasi yang mempunyai gerakan sesuai 
dengan jalur yang kita buat. Animasi ini merupakan lanjutan dari animasi motion 
tween. Animasi ini sangat cocok digunakan untuk jenis animasi yang 
membutuhkan ketelitian dalam pergerakan yang dikehendaki atau sesuai 


keinginan pembuat animasi. 


d. Tugas : Membuat animasi pergerakan pesawat dengan teknik motion 
guide 
Dalam kegiatan ini setiap peserta didik membuat animasi pergerakan pesawat 
dengan teknik motion guide menggunakan software macromedia flash atau 
adobe flash. Berdasar uraian materi diatas lakukan langkah-langkah berikut: 
«& 11. Buka file baru pada software flash atau Ctrl-N. 
? 1.2. Buatlah animasi animasi pergerakan pesawat dengan teknik 
motion guide sesuai langkah-langkah seperti dalam uraian diatas 
1.3.  Presentasikan hasil animasi yang telah dibuat siswa di depan 
kelas. 
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e. Test Formatif. 
Dalam test ini setiap peserta didik membaca dengan cermat dan teliti setiap butir 
soal dibawah ini. Kemudian berdasarkan uraian materi diatas tulislah jawabannya 
pada lembar jawaban test formatif yang telah disediakan. 

«9 1. Jelaskan pengertian Animasi motion guide? 
7 2. Jelaskan langkah-langkah dalam membuat animasi motion guide? 


f. Lembar Jawaban Test Formatif (LJ). 


LJ- 01 : pengertian animasi motion guide 
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g. Lembar Kerja Peserta Didik. 
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a. Tujuan Pembelajaran. 


Setelah mengikuti kegiatan belajar 5 diharapkan peserta didik dapat: 
“ Memahami teknik animasi tweening 


“ Membuat animasi 2 dimensi menggunakan teknik tweening 


b. Uraian materi. 
Cara Membuat Gambar Animasi Berputar atau Baling Baling Animasi 

Membahas masalah gambar animasi adalah suatu hal yang sangat menarik, 
karena seiring dengan perkembangan teknologi yang semakin maju, sehingga 
dengan semakin banyaknya software pendukung yang bermunculan, secara 
langsung akan berpengaruh dengan keanekaragaman bentuk gambar animasi 
yang akan dihasilkan. 

Masih pada software Flash, pada pembelajaran kali mengenai cara 
membuat gambar animasi berputar yang menyerupai baling-baling atau kipas 
angin, dengan arah dan kecepatan putaran yang bisa diatur/tentukan sendiri. 
Silahkan ikuti langkah-langkah berikut : 


1. Buka aplikasi Flash kemudian klik Flash Document pada bagian Create 
New. 


Create New Create from Template 


@& Flash Document LI Advertising 


@& Flash Side Presentation CJ Form Applications 
@' Flash Form Application CI Global Phones 


ai! ActionScrpt File CO Japanese Phones 

dil ActionSeript Communication File C3 POas 

&. Flash JavaScript File CO Photo Slideshow 
| Flash Project CJ Presentations 





Gambar 29. Create New 
2. Setelah muncul halaman baru, selanjutnya tekan Ctrl-F3 pada keyboard 
netbook/computer anda, sehingga muncul halaman seperti gambar dibawah. 
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at | color Swatches Manja 


| Size: 400 x 300 pixels 


Tide: | Membuat Animasi Berputar 
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ms: (200px — Gwidthy x— z00px — Kheighei 
1 0 Printer € Contents Default 
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Gambar 30. Hasilnya 





Pada halaman Document Properties seperti gambar no.2 diatas, silahkan isi 
form yang terdapat disana (contoh 200 Xx 200 px). Selanjutnya klik OK. 


Tekan Ctrl-F3 lagi untuk kembali kehalaman semula. 


Selanjutnya klik Rectangle Tool (R)kemudian pilih PolyStar Tool. 


P |) Rectangle Tool (R) 
Or 


PolvStar Tool 


ie 


Y 0 


Colors 


PL, 


Gambar 31. Polystar Tool 
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Klik Ctrl-F3 pada keyboard kemudian klik Option: pada halaman 


properties hingga muncul halaman Tool Settings seperti dibawah. 


Star point ace: jazo 
cr | 


Gambar 32. Cara memunculkan halaman tool settings 





Ganti ukuran default Number of sides dengan angka 3 Tekan Ctrl-F3 lagi 


untuk kembali kehalaman semula. 


Buatlah 2 buah segitiga seperti gambar dibawah. 


Colors 

PIPA 
.. 

TA 





Gambar 33. Hasilnya 
Selanjutnya klik Oval Tool (O) kemudian buatlah 1 buah lingkaran kecil 


seperti gambar no.5 diatas. 
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Langkah selanjutnya, aturlah posisi ketiga gambar tersebut hingga menjadi 


seperti gambar dibawah. 





Gambar 34. Cara mengatur posisi gambar 


Selanjutnya klik dibawah angka frame 30 kemudian klik F6 pada keyboard 
anda. 

Langkah berikutnya, klik dibawah angka frame 15 kemudian klik kanan, 
selanjutnya pilih Created Motion Tween 


Create Motion T 


Insert Frome 


Remove Frames 


Insert Keytrame 


Insert Blank Keyframe 


Convert to Key framezs 


Convert to Blank Keytrames 


Gambar 35. Frame 15 - created Motion Tween 


Selanjutnya klik Ctrl-F3 pada keyboard hingga muncul halaman seperti 
gambar dibawah. 
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Properties Tania 


Tween: (Motion "| Ik Scale 


Ease: ja“ : Edit... | 


—| 





| | f Orenttopath WM Senc W Snap 





Gambar 36. Hasil setelah menekan Ctrl-F3 


Pada bagian Rotate pilih CW dengan 5 times. 





e« Untuk menghasilkan putaran yang bagus, silahkan edit pada angka 
framellangkah no.6) dan angka frame rate (Langkah no.3). Contoh : 
Letakkan/geser Keyframe dibawah angka 70 dengan frame rate 50). 

CW adalah putaran kekanan yang searah dengan jarum jam, dan CCW 

adalah putaran kekiri. 


9. Tekan Ctrl#ENTER untuk melihat hasilnya 


4 
: 


c. Rangkuman 


Gambar 37. Animasi Berputar 


Untuk menghasilkan putaran yang bagus, silahkan edit pada angka 
frame (langkah no.6) dan angka frame rate (Langkah no.3). Contoh 
Letakkan/geser Keyframe dibawah angka 70 dengan frame rate 50). 

CW adalah putaran kekanan yang searah dengan jarum jam, dan CCW adalah 
putaran kekiri. 
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d. Tugas : Membuat animasi mobil bergerak maju dengan pergerakan 


rodanya berputar 


Dalam kegiatan ini setiap peserta didik membuat animasi mobil bergerak maju 
dengan pergerakan rodanya berputar menggunakan software macromedia flash 
atau adobe flash. Berdasar uraian materi diatas lakukan langkah-langkah berikut: 
«& 11. Buka file baru pada software flash atau Ctrl-N. 
7 1.2. Buatlah animasi mobil bergerak maju dengan pergerakan rodanya 
berputar sesuai langkah-langkah seperti dalam uraian diatas 
1.3.  Presentasikan hasil animasi yang telah dibuat siswa di depan 


kelas 


e. Test Formatif. 
Dalam test ini setiap peserta didik membaca dengan cermat dan teliti setiap butir 
soal dibawah ini. Kemudian berdasarkan uraian materi diatas tulislah jawabannya 
pada lembar jawaban test formatif yang telah disediakan. 
«9 A1. Jelaskan langkah-langkah dalam membuat animasi berputar atau 
Z baling-baling? 
2. Jelaskan apa yang dimaksud dengan CW dan CCW pada bagian 


Rotate? 


f. Lembar Jawaban Test Formatif (LJ). 
LJ- 01 : langkah-langkah dalam membuat animasi berputar atau baling- 


baling 
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g. Lembar Kerja Peserta Didik. 
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a. Tujuan Pembelajaran. 


Setelah mengikuti kegiatan belajar 6 diharapkan peserta didik dapat: 
“ Memahami teknik pembuatan obyek pada aplikasi animasi 2 dimensi 
“ Membuat obyek pada aplikasi 2 dimensi 


b. Uraian materi. 
1. Pengertian obyek 

Objek adalah suatu tipe data seperti suara, gambar, teks, yang digunakan 
untuk mengontrol movie. Semua objek merupakan bagian dari suatu kelas. Objek 
pada Flash dapat berupa gambar yang nampak , hingga sesuatu yang abstrak 
(tidak nampak), misalnya tanggal, data, atau deteksi input dari mouse. Objek 
dapat dikenali dan digunakan setelah terlebih dahulu diberi nama. Proses 
penamaan suatu objek disebut instantiating. Selain objek yang didefinisikan, 
pada Flash terdapat predefined class yang terdiri dari objek yang bisa dipakai di 
dalam movie. Beberapa diantaranya, MovieClip, Color, Sound, Button, Stage, 
Text Field, dan Text Format. 


2. Pengetahuan Dasar Objek Pada Flash 

Terdapat berbagai macam objek yang sangat unik di dalam Flash 
diantaranya yaitu oval tool (yang sering digunakan untuk menggambar sebuah 
lingkaran) dan rectangle tool (yang sering digunakan untuk menggambar 
sebuah bujur sangkar atau persegi panjang). Kedua tool tersebut bersifat paten 
yakni sudah menjadi bawaan Flash itu sendiri. 


a. Stroke dan FIlI 

Kedua objek tool tersebut (oval tool & rectangle tool) terdiri dari dua 
bagian yaitu: Outline atau Stroke dan fill. Outline atau Stroke merupakan 
bagian terluar dari objek tersebut, sedangkan fill merupakan bagian terdalam 
dari objek tersebut yang dapat diisi dengan warna atau gambar Lihat gambar 
berikut | 


46 |Page 


Teknik Animasi 2 Dimensi 


Outline 


EU 


Gambar 38. Fill dan Outline 


Stroke & Fill dapat disatukan dengan cara membuatnya menjadi satu grup, 
yaitu dengan perintah: Group (dapat dipilih melalui menu Modify - Group) atau 
dengan cara menekan tombol Ctr-G secara bersamaan. Tetapi sebelum 
menjadikan Stroke & Fill menjadi satu grup yang harus lakukan adalah memblok 
seluruh bagian Stroke & Fill menggunakan Selection tool hingga terlihat seperti 
gambar. Jika telah diblok maka harus membuatnya menjadi satu grup dengan 
cara yang telah dijelaskan diatas. 





Gambar 39. Hasil setelah menggunakan selection tool 


b. Membelah Objek dengan Line Tool, Selain itu dalam pemotongan gambar 
melalui Flash 8 tools sangatlah mudah, karena dapat menggunakan berbagai 
macam cara. Misalnya dalam memotong sebuah fill dengan menggunakan line 
tool. 
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m1 74 


(n) (1) (an) 


Gambar 40. Membelah objek dengan Line Tool 


c. Menggambar dengan Pencil Tool, Dalam membuat sebuah objek, dapat 


menggunakan tool yang terdapat pada Tools box, yaitu pencil tool. 


Straighten Smooth Ink 


JUU 


Gambar 41. Menggambar dengan Pencil Tool 





Jika memilih Straighten maka objek yang buat akan berbentuk bujur 
sangkar yang rapi. Tetapi jika memilih Smooth maka objek yang buat akan 
tampak halus garisnya meskipun tidak serapih straighten. Begitu pula dengan Ink 
bentuknya juga tidak serapih Straighten, tetapi yang membedakan antara Ink 


dengan Smooth adalah garisnya yang kurang halus(masih terlihat kasar). 
d. Menggambar dengan Pen Tool, Pen tool biasanya digunakan untuk 


menggambar objek dengan metode edit points. Untuk menggambar sebuah 


objek, tinggal menentukan posisi dari edit points yang inginkan. 
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Edit points 


Gambar 42. Menggambar dengan Pen Tool 


e. Mewarnai objek dengan Brush Tool, Brush yang artinya sendiri adalah 


sikat/kuas. Tool ini digunakan untuk mewarnai sebuah objek secara keseluruhan. 






Ada 5 metode pemberian warna pada brush tool (lihat gambar dibawah ini). 
tra . 
C 

vA 


PPPPP 


(1) (in) (un) (iv) (v) (vi) 


- 





Gambar 43. Cara mewarnai objek dengan brush tool 


f. Merubah Bentuk Objek dengan Selection Tool Merubah dalam flash 8 
sangatlah mudah dan efisien. Untuk mengubah bentuk suatu objek dapat 
menggunakan selection tool. Dengan selection tool tinggal mengubah suatu 
objek dengan menggerakkan outline (garis objek) dari objek tersebut. 
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Gambar 44. Cara merubah bentuk objek dengan selection tool 


g. Merubah Bentuk Objek dengan Subselection Tool. Merubah bentuk suatu 
objek dengan menggunakan Subselection tool sangatlah mudah dan 
menyenangkan, karena dengan subselection tool dapat merubah suatu objek 
tool menjadi suatu objek yang inginkan. Lihat gambar dibawah ini yang telah 
dipilih dengan menggunakan subselection tool. 


.@ 


Gambar 45. Merubah Bentuk Objek dengan Subselection Tool 





h. Mengimport Gambar dan Menggambar Ulang 

Import gambar biasa dilakukan dalam menggunakan Flash. Hal ini 
diperlukan untuk menjadikan gambar tersebut sebagai Background atau pun 
untuk menggambar ulang. Caranya adalah dengan memilih Menu File - Import 
- Import to Stage, lalu pilihlah gambar yang dikehendaki. Apabila akan 
menggambar ulang gambar tersebut, maka letakkan gambar tersebut di layer 


bawah dan buat kembali layer di atasnya untuk membuat gambar yang baru. 
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3. Dasar — Dasar Pewarnaan Objek Pada Flash 8 

Untuk memberikan efek yang baik pada suatu animasi ada kalanya harus 
mengatur warna suatu objek agar terlihat menarik. Dalam pewarnaan suatu objek 
pada Flash 8 dapat menggunakan berbagai macam tools, diantaranya yaitu: 
Color Mixer. 
Color Swatches. 
Paint Bucket Tools. 
Ink Bottle Tools. 
Brush Tools. 


AN 5. na 


Jika menginginkan animasi yang dibuat mempunyai tampilan menarik dan 
indah, maka harus memberi efek warna yang baik pula. Oleh karena itu kali ini 
akan belajar bagaimana memberikan efek warna pada suatu objek agar terlihat 
lebih indah.Memberi warna dengan Color Mixer & Color Swatches Untuk 
memberi efek warna pada objek pada Flash 8 hanya membutuhkan 2 color tool, 
yaitu: Color Mixer & Color Swatches. Saat ini akan membahas tentang 


bagaimana cara menggunakan tools tersebut. 


Penentu Warna 
Penentu Warna Transparan 
Penentu Type Fil 


Penentu Brightness 





Gambar 46. Brush Tool 


Didalam Color mixer terdapat 5 macam type fill: 
None — tidak memberi warna apapun pada fill. 
Solid — memberi warna padat pada fill. 

Linier — memberi warna berbentuk linier pada fill. 


Radial — memberi efek warna radial pada fill. 
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Bitmap — memberi image pada fill. (untuk mengimpor file gambar gunakan 


import to library pada file menu). 


Untuk memberi warna pada objek yang ditentukan, harus menggunakan 
tools yang bernama paint bucket tool. Biasanya yang diberi warna pada object 
ialah fill-nya saja. Untuk memberi warna pada Stroke, harus menggunakan ink 
bottle tool. Pada pojok kanan window color mixer terdapat R, G, B (yang biasa 
disebut sebagai penentu warna). R(Red) digunakan untuk memberi nilai 
seberapa besar kemerahan warna objek tersebut. G(Green) digunakan untuk 
memberi nilai seberapa besar kehijauan warna objek tersebut. B(Blue) 
digunakan untuk memberi nilaii seberapa besar kedalaman warna biru pada 


objek tersebut. Alpha memberi efek warna transparan pada objek yang dituju. 





Gambar 47. Warna pada Paint Bucket Tool 


Pada color swatches untuk memberi warna pada object prinsipnya sama 
saja dengan color mixer, yang membedakannya yaitu kalau pada color mixer 
dapat mencampurkan berbagai warna sekaligus memodifikasinya menjadi suatu 
efek warna sesuai dengan keinginan . Tetapi kalau pada color swatches efek 


warna sudah ditentukan oleh system. 
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3. Membuat gambar obyek Ayam 


Sebelum membuat gambar obyek ayam uraikan terlebih dahulu bagian- 
bagiannya seperti badan, sayap, mata, mahkota, ekor, dan kaki. Mulailah 
membuat sketsa dasar, lalu lakukan teknik pewarnaan. Selain pemberian efek 
instance yang perlu perhatian khusus, keakuratan penempatan masing-masing 


objek juga tak kalah penting. 





Gambar 48. Membuat gambar Objek Ayam 


a. Membuat Gambar Badan 


Siapkan Flash Document baru, klik menu File »- New. Buat sketsa dasar bentuk 
badan klik menu line tool (N) tarik hingga membentuk ukuran badan, dan untuk 
memberi lengkungan tinggal arahkan saja kursornya ke bagian garis badan 
tadi. Sehingga kursor tersebut berbentuk lengkungan seperti alis, dan tari 
lengkungan itu hingga berbentuk badan. 
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Gambar 49. Membuat gambar Badan 


Untuk setting warna, klik pada menu Paint Bucket Tool (K) atau panel Color 
Mixer pilih warna kuning, dan hilangkan garis Outlinenya. 





Gambar 50. Memberikan warna dengan Panel Color Mixer 


Seleksi objek badan, jadikan simbol dengan nama Badan. Pilih type behavior 
Movie clip, kemudian atur letak titik registrasi tepat di tengah. 
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Convert to Symbol 
Name: Badan OK 
Type: (Movie dip Registration: 298 |...Cancel...| 

- 000 ! 

(Button 

CO Graphic Pa AA 
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Gambar 51. Seleksi Objek Badan 


Tampilkan panel Filter, lalu klik tanda plus (-) dan pilih Glow, ikuti setting 
berikut: Blur X dan Y: 18, Strength: 1005, OGuality: Low, Color: Hijau 


(#999900), klik kotak cek Inner glow. 





g 
$ 
« 
- 
7 
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Gambar 52. Tampilan Panel Filter 


Hasil dari penggunaan efek Glow 





Gambar 53. Efek Glow 


b. Membuat Gambar Mata 


Buat layer baru dengan nama Mata. Gambar empat sketsa objek mata dengan 


Line Tool, kemudian edit hingga seperti terlihat pada gambar berikut ini. 
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Gambar 54. Membuat gambar mata 


Untuk membuat lengkungan, ikuti seperti langkah di atas atau bisa juga 
menggunakan langsung menu-menu yang ada. Mis: seperti membuat lingkaran, 


tinggal pilih saja menu Oval Tool (O). 


Pilih warna Biru tua (#003366), Biru (#0066CC), Putih, Coklat (#990000), dan 
Putih. Warnai objek sesuai urutan, lihat hasilnya. 


000 


Gambar 55. Pemilihan warna 


Posisikan objek 1 dan 2, lalu hilangkan outline yang berada di dalam, hapus 
outline objek 4, 5, dan 6, lalu posisikan ketiga objek tersebut terhadap objek 3. 
Namun sebelumnya ganti warna outline objek 3 dengan warna Coklat (#996600). 


Lihat ilustrasi komposisi penempatan di bawah ini. 





Gambar 56. Cara mengatur Objek 


Posisikan gabungan objek 2 terhadap gabungan objek 1, lihat hasilnya 


membentuk gambar mata. 


56 |Page 


Teknik Animasi 2 Dimensi 








Gambar 57. Hasil penggabungan objek 


Seleksi semua objek kemudian jadikan simbol dengan nama Mata. Pilih type 
behavior Movie clip kemudian atur letak titik registrasi tepat di tengah. 


Berikan efek instance dengan menampilkan panel Filter, lalu klik tanda # dan 
pilih Bevel, ikuti setting berikut: Blur X dan Y: 12, Strength: 100”, Guality: 
Low, Shadow: Coklat (#996600) Highlight: Hijau (#999900) Angle: 45, 
Distance: 3, pilih Type: Inner. 





Gambar 58. Pengaturan efek bevel 





Gambar 59. Hasil penggunaan evek bevel 
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Posisikan objek Movie clip mata tersebut, lihat hasilnya di bawah ini : 





Gambar 60. Hasil Objek Movie Clip Mata 
c. Membuat Gambar Mahkota 


Buat layer baru dengan nama Mahkota, lalu buatlah sketsa objek mahkota di 
stage dan edit dengan Selection Tool. Lihat gambar berikut ini. 


Gambar 61. Membuat gambar Mahkota 





Seleksi objek mahkota, kemudian beri warna Oranye (#FF6600), setelah itu 
hapus outline. Pemberian warna disini sama dengan perberian warna seperti 


langkah-langkah di atas. 
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Gambar 62. Hasil pemberian warna pada gambar mahkota 


Jadikan simbol dengan nama Mahkota, pilih behavior Movie clip dengan titik 
registrasi di tengah. 


Tampilkan panel Filter, lalu klik tanda plus (4) dan pilih Bevel, ikuti setting 
berikut: Blur X dan Y: 10, Strength: 10076, Guality: Low, Shadow: Kuning 
(#FFCC00), Highlight: Putih, Angle: 111, Distance: 5, pilih Type: Inner. 
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Gambar 63. Hasil penggunaan efek Bevel 


Posisikan objek Movie clip Mahkota terhadap objek Movie clip Badan 





Gambar 64. Memposisikan Movie Clip Mahkota 
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d. Membuat Gambar Mulut 


Buat layer baru dengan nama Mulut, lalu buatlah enam sketsa objek sayap, 
kemudian edit dengan Selection Tool. Lihat gambar di bawah ini. 


Gambar 65. Cara membuat gambar mulut 


Beri warna objek 1 dengan warna coklat (#996600), kemudian hilangkan outline. 
Sama seperti langkah di atas. 





Gambar 66. Hasil Pewarnaan 


Jadikan simbol dengan nama Mulut, tampilkan panel Filter. Beri efek Bevel 
dengan pengaturan berikut: Blur X dan Y: 15, Strength: 100”, @uality: Low, 
Shadow: Hitam, Highlight: Putih Angle: 45, Distance: 5, pilih Type: Inner. 





Gambar 67. Hasil penggunaan efek Bevel 


Posisikan objek Movie clip Mulut terhadap objek Movie clip Badan. 
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Gambar 68. Memposisikan Movie Clip Mulut 


e. Membuat Gambar Kaki 


Buat layer baru dengan nama Kaki, setting untuk panel Property: Stroke Color: 
Coklat (#660000), Fill Color: No Fill, Stroke Height:1, Stroke Style: Solid. 


Gambar 69. Pengaturan Property Stroke 


Gambar 70. Membuat objek kaki 


Pertebal garis telapak kaki dengan menambahkan sedikit garis. 
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Gambar 71. Hasil pertebal pada garis telapak kaki 


Warnai objek kaki dengan warna jingga (#FF6600). 





Gambar 7/2. Hasil mewarna gambar objek kaki 


Seleksi objek tersebut, lalu jadikan simbol dengan nama Kaki, pilih behavior 


Movie clip dengan titik registrasi di tengah. 


Tampilkan panel Filter, lalu klik tanda plus (4) dan pilih Bevel, ikuti setting 
berikut: Blur X dan Y: 4, Strength: 100”c, Guality: Low, Shadow: Coklat 
(#996600), Highlight: Putih, Angle: 45, Distance: 3, pilih Type: Inner. 
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Gambar 73. Cara membuat gambar menjadi blur 
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Gambar 74. Hasil gamba yang di blur 


Buat duplikat objek Movie clip Kaki, lalu posisikan terhadap objek Badan, 
gunakan fasilitas Arrange. 





Gambar 7/5. Menempatkan objek kaki 


f. Membuat Gambar Sayap dan Ekor 


Buatlah sketsa objek sayap, kemudian edit dengan Selection Tool. Lihat gambar 


di bawah ini. 
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Gambar 76. Cara membuat gambar sayap dan ekor 


Beri warna kuning (#FFCC00) dan hilangkan outline. Perhatikan gambar di 


bawah ini. 





Gambar 77. Pemberiaan warna pada gambar 


Jadikan simbol dengan nama Sayap, tampilkan panel Filter, lalu klik tanda plus 
(x) dan pilih Bevel, ikuti pengaturan berikut: Blur X dan Y: 11, Strength: 1005, 
Ouality: Low, Shadow: Putih, Highlight: Putih, Angle: 45, Distance: 5, pilih 
Type: Inner. 


2 Prepediae Ita Fereratai 
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Gambar 78. Tampilan panel filter 


Gandakan objek Movie clip Sayap, putar dengan bantuan fasilitas Free 


Transform Tool. Lakukan sekali lagi, lalu posisikan. 
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Gambar 79. Memposisikan Movie Clip Sayap 





Buatlah ekor dengan menggandakan objek Movie clip Sayap, perkecil dan putar 
dengan bantuan fasilitas Free Transform Tool. Lakukan lagi, lalu posisikan. 


ey 


Gambar 80. Menggadakan objek Movie Clip 


Seleksi semua objek, lalu jadikan simbol dengan nama Ayam, pilih behavior 
Movie clip dengan titik registrasi di tengah. 


g. Memberi Efek Instance 


Tampilkan panel Filter, lalu klik tanda plus (4x) dan pilih Bevel, ikuti pengaturan 
berikut: Blur X dan Y: 34, Strength: 1007-, @uality: Low, Shadow: Coklat 
(#996600), Highlight: Coklat (#996600), Angle: 180, Distance: 3, pilih Type: 


Inner. 


” npadiae Ita Fw ata IL 
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Gambar 81. Memberi Efek Instance 


Kemudian beri efek Glow dengan setting berikut: Blur X dan Y: 5, Strength: 
100”, Guality: Low, Color: Coklat (#996600), klik kotak cek Inner glow. 
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Gambar 82. Pengaturan efek Glow 


Klik menu File » Save, simpan file dengan nama Ayam. 





Gambar 83. Hasil akhir kreasi objek ayam 


c. Rangkuman 

Objek adalah suatu tipe data seperti suara, gambar, teks, yang digunakan 
untuk mengontrol movie. Semua objek merupakan bagian dari suatu kelas. Objek 
pada Flash dapat berupa gambar yang nampak , hingga sesuatu yang abstrak 
(tidak nampak), misalnya tanggal, data, atau deteksi input dari mouse. Objek 
dapat dikenali dan digunakan setelah terlebih dahulu diberi nama. Proses 
penamaan suatu objek disebut instantiating. Selain objek yang didefinisikan, 
pada Flash terdapat predefined class yang terdiri dari objek yang bisa dipakai di 
dalam movie. Beberapa diantaranya, MovieClip, Color, Sound, Button, Stage, 
Text Field, dan Text Format. Terdapat berbagai macam objek yang sangat unik 
di dalam Flash 8 diantaranya yaitu oval tool (yang sering digunakan untuk 


menggambar sebuah lingkaran) dan rectangle tool (yang sering digunakan 
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untuk menggambar sebuah bujur sangkar atau persegi panjang). Kedua tool 
tersebut bersifat paten yakni sudah menjadi bawaan Flash 8 itu sendiri. 


d. Tugas : Membuat obyek pada Aplikasi Animasi 2 dimensi 


Dalam kegiatan ini setiap peserta didik membuat obyek 1 hewan menggunakan 
software macromedia flash atau adobe flash. Berdasar uraian materi diatas 
lakukan langkah-langkah berikut: 
«& 11. Buka file baru pada software flash atau Ctrl--N. 
P 1.2. Buatlah obyek 1 hewan sesuai langkah-langkah seperti dalam 
uraian diatas 
1.3. Presentasikan hasil animasi yang telah dibuat siswa di depan 
kelas 


e. Test Formatif. 
Dalam test ini setiap peserta didik membaca dengan cermat dan teliti setiap butir 
soal dibawah ini. Kemudian berdasarkan uraian materi diatas tulislah jawabannya 
pada lembar jawaban test formatif yang telah disediakan. 
« 1. Jelaskan pengertian obyek pada software flash ? 
7 2. Sebutkan berbagai macam objek yang sangat unik di dalam 
Flash8 ? 
3. Sebutkan dan Jelaskan berbagai macam tools Dalam pewarnaan 
suatu objek pada Flash 8? 
4. Jelaskan langkah-langkah memasukkan gambar kedalam area 
kerja software flash? 
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f. Lembar Jawaban Test Formatif (LJ). 
LJ- 01 : Pengertian obyek pada software flash 
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LJ- 04 : langkah-langkah memasukkan gambar kedalam area kerja 


software flash 
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g. Lembar Kerja Peserta Didik. 
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a. Tujuan Pembelajaran. 


Setelah mengikuti kegiatan belajar 7 diharapkan peserta didik dapat: 
“ Memahami teknik pembuatan obyek pada aplikasi animasi 2 dimensi 
“ Membuat obyek pada aplikasi 2 dimensi 


b. Uraian materi. 


1. Membuat obyek Kepala dan Bentuk Wajah 

Untuk memudahkan menggambar kepala, gunakan tehnik layer. Siapkan dua 
layer dimana layer 1 terletak dibawah layer 2. buatlah bentuk kepala berupa 
lingkaran atau oval sesuai keinginan dengan menggunakan Oval Tool pada layer 
1, sedangkan pada layer 2 siapkan garis bantu untuk mempermudah pembuatan 
bentuk wajah yang diinginkan seperti variasi berikut: 


File View Control Debug 





Macam bentuk Kepala 


Gambar 84. Macam — macam bentuk kepala 
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Mata dan Alis 
Setelah membuat bentuk wajah yang diinginkan, saatnya mencoba mengisinya 
dengan mata, hidung , telinga, mulut dan rambut. Awali dengan menggambar 
mata. Untuk wajah tampak depan garis bantu yang dibuat harus sejajar garis 


horizontal dan simetris kanan dan kiri. 


Posisi Mata 





Garis Bantu Wajah 


Gambar 85. Membuat alis mata 


Dalam menggambar mata, perlu memperhatikan bagian-bagian dari mata seperti 
bola mata, iris, pupil, bulu mata, dan shading. kita mulai dengan membuat bentuk 
mata bisa menggunakan Oval Tool atau dengan Line Tool, kemudian baru 
mengisinya dengan bagian-bagian mata. 


File View Control Debug 
: 


Kelopak — Bulu Mata 


— Bola Mata 
BAGIAN MATA 





Gambar 86. Bagian — bagian mata 
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PERHATIAN : Dalam membuat karakter ini jangan lupa untuk FIII colour di non 


aktifkan dulu, atau kata lain kita bermain dengan Line / garis 


Mata dapat digambarkan dalam berbagai bentuk sesuai dengan penokohan. 


Berikut berbagai variasi bentuk mata yang sering dijumpai: 


rne view Control vebug 





Gambar 87. Berbagai variasi mata 


TIPS : untuk membedakan karakter cewek dan cowok, kita dapat 
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menambahkan/memperpanjang bulu mata yang lebih lentik, 


— # — 


File View Control Debug 





Gambar 88. Bulu mata 


dengan /ine tool dan dilengkungkan dengan selection Tool, seperti membuat 
bentuk wajah dengan garis bantu 


| gardumedia.fla | 


blagOBB 1 120fps O00s « 
Workspacer Si H3 TK 


1 


Dekatkan “Selection Tool” 
ke Garis 





Gambar 89. Membuat bentuk wajah dengan Line Tool 


Untuk Finishing, tambahkan gambar Alis dan kelopak mata (jika perlu). Seperti 
mata bentuk alis juga beragam sesuai kebutuhan. 
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File View Control Debug 





Gambar 90. Berbagai Variasi Alis 


Perlu diingat tehnik menggambar menggunakan line tool dan selection tool 
untuk membuat lekungan dan rahasianya untuk membuat garis bantu dan 


membuat gambar dengan line tool propertinya harus seperti gambar dibawah ini 






| 8 Properties x | 


Docume 
Fl : 
Untitied 


Snap to Obyjects 








Gambar 91. Teknik menggambar menggunakan Line Tool 
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2. Membuat karakter dengan garis bantu sketsa 

Parktik berikutnya akan dibahas adalah membuat gambar wajah karakter animasi 
pada Adobe Flash CS3. Disini akan dilakukan praktik bagaimana cara membuat 
gambar mata, rambut, serta wajah karakter. 


Berikut hasil akhir yang akan kita buat: 





Gambar 92. Hasil Akhir 


Bagaimana membuat wajah karakter animasi seperti diatas? Baiklah, sebagai 
contoh silahkan lihat dan ikuti langkah-langkah dan gambar berikut: 


Langkah 1 


Buatlah garis bantu sketsa untuk animasi wajah yang akan dibuat. Buat lingkaran 
dengan Oval Tool, tapi cukup dengan warna Stroke. Warna Fill dibuat tidak ada. 
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Gambar 93. Langkah 1 


Langkah 2 


Lalu dengan Pencil Tool buat dua garis bantu yang bersilangan untuk membantu 
membuat desain wajah karakter. Dua garis silang ini bisa membantu menentukan 
letak posisi mata hidung dan mulut karakter yang akan dibuat, juga membantu 
menentukan kearah mana wajah karakter yang dibuat. 


2 4 Cke fa Scene 1 


Arah Wajah Karakter 
Garis Bantu 





Gambar 94. Langkah 2 
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Langkah 3 


Dengan garis bantu dan garis lingkar oval yang telah dibuat, mulailah mendesain 
wajah : lekuk pipi, mata, hidung, mulut dan telinga karakter. Disini diggunakan 
Brush Tool untuk menggambar desain wajah karakter. Gambarkan juga tubuh 
karakter agar gambar terlihat sempurna (gambar tubuh hanya desain awal, yang 


nantinya bisa anda sempurnakan dengan pakaian dan lainnya). 





Gambar 95. Langkah 3 
Langkah 4 
Jika desain wajah telah selesai dibuat, lanjutkan dengan desain rambut karakter. 
Hanya saja kali ini rambut karakter dibuat di layer yang berbeda. Jadi buat layer 


baru dan beri nama rambut sedangkan layer sebelumnya beri nama wajah. Kunci 


layer wajah agar tidak rusak ketika mendesain rambut untuk karakter. 
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| Animasi Wajah Karakter" | 
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Gambar 96. Langkah 4 


Mulailah membuat rambut karakter di layer rambut. 


uv w dj) d 1 


3 s03 OK 1 L20f 


cb & Scene 1 





Gambar 97. Layer Rambut 
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Langkah 5 


Apabila desain rambut selesai, bukalah kunci pada wajah dan hapus garis 
kerangka atau Line pada layer wajah tersebut. Gunakan Eraser Tool dan pilih 
Erase Line pada Eraser Mode sehingga hanya menghapus garis Lines untuk 


kerangka wajah saja. 





Gambar 98. Langkah 5 


Langkah 6 


Mulailah mewarnai karakter agar karakter terlihat lebih menarik. Tapi perlu 
diketahui, ketika mewarnai wajah kunci layer rambut sehingga tidak mengganggu 


gambar rambut dilayer rambut begitu pula sebaliknya. 
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Dalam pewarnaan karakter dimulai dengan mewarnai wajah jadi kunci layer 
rambut serta klik warna outline agar tampak berbeda dan tidak terganggu dalam 
proses pewarnaan wajah. 


W rambut . U Oo 
Isu laoaK 1 20fps O0s « 
Che “ Scene 1 
1 | 2 -. & N 
f N Ta 1 
NA | N " 





Gambar 99. Langkah 6 


Langkah 7 


Mulailah dengan pewarnaan wajah. Pilihlah warna yang sesuai dengan wajah 
karakter yang dibuat. Untuk mempermudah pewarnaan pada wajah warnai saja 
kulit wajah dan tubuh dulu. Gunakan Brush Tool dan pilih Paint Behind dan tutup 
area wajah dan tubuh saja. Untuk mewarnai wajah dan tubuh secara 


keseluruhan gunakan Paint Bucket Tool. 
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Gambar 100. Langkah 7 





Gambar 101. Hasil dari Langkah 7 


Langkah 8 


Selanjutnya mulailah dengan pewarnaan mata. Pada pewarnaan mata fokuslah 
pada mata saja. Gunakanlah Zoom Tool dan pilih area mata dan mulailah 


mewarnai mata karakter. 
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Gambar 102. Langkah 8 


Langkah 9 


Rapikan area mata yang terkena warna wajah. Gunakan Brush Tool dan pilih 
Paint Selection lalu pilih warna putih. Lalu dengan Selection Tool pilih warna 
wajah dan pilih kembali Brush Tool sehingga warna wajah saja yang tertimpa. 
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Gambar 103. Langkah 9 


Selebihnya warnailah mata secara secara seksama. 





Gambar 104. Pewarnaan mata 
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Langkah 10 


Saat ini pewarnaan wajah ditahan sampai di sini. Lanjutkan dengan pewarnaan 
rambut. Seperti sebelumnya, karena akan mewarnai rambut maka kali ini gantian 
kunci layer wajah dan hilangkan warna Outline pada layer wajah tersebut. 
Sedangkan pada layer rambut hilangkan fungsi Lock/kunci dan munculkan 


kembali warna Outlinenya. 






2 “3103 


ckc - Scene 1 






Gambar 110. Langkah 10 


Mulailah merapikan gambar rambut dengan menutupi area rambut yang masih 


terbuka. 
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Gambar 111. Perapian warna 
Langkah 11 


Lalu warnailah dengan Paint Bucket Tool secara seksama. 
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Gambar 112. Langkah 11 
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Langkah 12 


Klik kembali warna Outline pada layer wajah untuk melihat kecocokan antara 


wajah dan rambut. 


&) waja .a0 


3 903 laga 1 Ros Os « 
cbr fa Scene 1 





Gambar 113. Langkah 12 


Langkah 13 


Beri effect cahaya pada rambut jika perlu. Gunakan Paint Selection dan pilih 
warna rambut saja yang akan diwarnai, jangan sampai kena garis rambut 


ataupun warna lainnya. 
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Gambar 114. Langkah 13 


Langkah 14 


Jika pewarnaan rambut telah selesai, selanjutnya finishing warna kulit wajah 
sama seperti warna rambut. Kembali Lock/ kunci layer rambut dan buka Lock 
pada layer wajah. Lalu lakukan pewarnaan pada layer wajah. Gunakan Paint 


Selection dan pilih warna kulit saja yang diwarnai. 





Gambar 115. Langkah 14 
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Langkah 15 


Jika semua telah diwarnai berilah si karakter baju biar bagus. Untuk finishing, 
gambar baju yang cocok untuk karakter dilayer yang berbeda. Jadi buat satu 
layer lagi untuk gambar baju karakter dan pastikan posisinya paling atas dari 


semua posisi layer yang ada. 





Gambar 116. Langkah 15 
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Hasil Akhir 





Gambar 117. Hasil Akhir 


c. Rangkuman 

Buatlah bentuk kepala berupa lingkaran atau oval sesuai keinginan dengan 
menggunakan Oval Tool pada layer 1, sedangkan pada layer 2 siapkan garis 
bantu untuk mempermudah pembuatan bentuk wajah yang diinginkan. Untuk 
wajah tampak depan garis bantu yang dibuat harus sejajar garis horizontal dan 
simetris kanan dan kiri. Dalam menggambar mata, perlu memperhatikan bagian- 
bagian dari mata seperti bola mata, iris, pupil, bulu mata, dan shading. kita mulai 
dengan membuat bentuk mata bisa menggunakan Oval Tool atau dengan Line 
Tool, kemudian baru mengisinya dengan bagian-bagian mata. Untuk membuat 
karakter jangan lupa untuk Fill colour di non aktifkan dulu, atau kata lain kita 
bermain dengan Line / garis. Membedakan karakter cewek dan cowok, dapat 
menambahkan/memperpanjang bulu mata yang lebih lentik. Untuk Finishing 
wajah , tambahkan gambar Alis dan kelopak mata (jika perlu). Seperti mata 
bentuk alis juga beragam sesuai kebutuhan. 
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d. Tugas : Membuat wajah karakter perempuan 


Dalam kegiatan ini setiap peserta didik membuat 1 wajah karakter perempuan 
menggunakan software macromedia flash atau adobe flash. Berdasar uraian 
materi diatas lakukan langkah-langkah berikut: 
«& 11. Buka file baru pada software flash atau Ctrl--N. 
7 1.2. Buatlah obyek 1 wajah karakter perempuan sesuai langkah- 
langkah seperti dalam uraian diatas 
1.3.  Presentasikan hasil animasi yang telah dibuat siswa di depan 


kelas 


e. Test Formatif. 
Dalam test ini setiap peserta didik membaca dengan cermat dan teliti setiap butir 
soal dibawah ini. Kemudian berdasarkan uraian materi diatas tulislah jawabannya 
pada lembar jawaban test formatif yang telah disediakan. 
«9 A1. Jelaskan pengertian obyek pada software flash ? 
7 2. Sebutkan berbagai macam objek yang sangat unik di dalam 
Flash8 ? 
3. Sebutkan dan Jelaskan berbagai macam tools Dalam pewarnaan 
suatu objek pada Flash 8? 
4. Jelaskan langkah-langkah memasukkan gambar kedalam area 


kerja software flash? 


f. Lembar Jawaban Test Formatif (LJ). 


LJ- 01 : Pengertian obyek pada software flash 
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LJ- 03 : Berbagai macam tools Dalam pewarnaan suatu objek pada Flash8 


LJ- 04 : langkah-langkah memasukkan obyek gambar kedalam area kerja 


software flash 
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g. Lembar Kerja Peserta Didik. 
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a. Tujuan Pembelajaran. 


Setelah mengikuti kegiatan belajar 8 diharapkan peserta didik dapat: 
“ Memahami teknik pembuatan obyek pada aplikasi animasi 2 dimensi 


“ Membuat obyek pada aplikasi 2 dimensi 


b. Uraian materi. 
1. Membuat Obyek menjadi Button/ tombol 

Button adalah salah satu type dari symbol. Button digunakan untuk 
membuat tombol di flash. Dengan dijadikannya suatu objek menjadi button maka 
selain objek tersebut menjadi tombol, objek tersebut juga dapat menggunakan 
beberapa fasilitas dari flash seperti animasi tween, masking, guide dan juga kita 
dapat memberikan actionscript pada objek tersebut. Di bawah ini akan dipelajari 
cara dasar membuat tombol. Melalui cara dasar ini dapat berkreasi untuk 


membuat tombol yang bagus dan menarik. 


Buatlah sebuah flash document. 
b. Buatlah sebuah lingkaran seperti gambar dibawah ini: 





Gambar 118. Lingkaran berwarna merah 


c. Seleksi lingkaran tersebut kemudian klik kanan »- Convert to Siymbol atau 
tekan F8 pada keyboard atau bisa juga melalui Modify 5 Convert to Symbol... 
d. Pada kotak dialog yang muncul pilih Button sebagai Typenya seperti gambar 
dibawah ini : 
Convert to Symbol 
Name: Symbol 1 


Type: Movie dip Registration: #85 
Doo 
&: Button 
Graphkc 





Gambar 119. Button sebagai Iype 
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e. Ubah Name pada kotak dialog tersebut jika diperlukan, kalau sudah selesai 
tekan OK maka lingkaran yang anda buat tadi sudah berubah menjadi sebuah 
Symbol bertype Button. 

f. Klik dua kali Button tadi atau klik kanan - Edit In Place maka akan masuk ke 
stage button. 


g. Akan tampil jendela Timeline seperti gambar dibawah ini : 





Gambar 120. Timeline 





Up : tampilan utama button 
Over : tampilan button ketika kursor mouse berada diatas button 
Down : tampilan button ketika kursor mouse menekan button 
Hit : luas daerah aktif button 
Om 3 | ee To Tan 
A9 OM te a34 Oo oa 
Juan Bi maag |. 














Gambar 121. Pengarah gambar 


h. Pilih bagian Over, kemudian klik kanan - Insert Key Frame atau tekan F6 


pada keyboard. Ubah warna lingkaran menjadi lebih muda 


i. Pilih bagian Down, kemudian klik kanan - Insert Key Frame atau tekan F6 


pada keyboard. Ubah warna lingkaran menjadi lebih tua 
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J. Jika ingin daerah aktif button menjadi lebih luas, pilih bagian Hit kemudian klik 
kanan - Insert Key Frame tekan F6 pada keyboard. Buatlah lingkaran yang ada 
menjadi lebih besar. 

k. Kalau sudah selesai, klik tombol scene pada timeline atau bisa juga tekan 

CT RL-E pada keyboard. 

I. Terakhir test movie dengan menekan CI RL-ENTER. 


2. Membuat Link Tombol di Flash 

Pada praktik kali ini akan dibahas cara untuk membuat tombol yang dapat 
terhubung dengan suatu lembar isi (page). Untuk dapat membuatnya ikutilah 
langkah-langkah berikut ini: 


1. Siapkan Stage berukuran 550 x 400 pixel dengan fps : 30. 
2. Buat tulisan “HOME”, “CONTACT”, “PRODUCT” dengan menggunakan 


text tool(T) dengan font dan ukuran bebas. Lalu atur seperti pada gambar: 


UGM | CONTAET Prenuet 


Gambar 122. Penggunaan Text Line 


3. Seleksi tulisan “HOME” lalu buat symbol movieclip dengan menekan F8. 


Isi nama seperti pada gambar dibawah ini, lalu tekan OK. 
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LJ butkoni 





Hemr cOntaiet | oo pnOpVeT 
Gambar 123. Symbol Movieclip 


4. Lalu Double klik pada instance movieclip tulisan “HOME” dan telah 
berada di dalam instance movieclip tersebut. 

5. Ubah nama layer tempat tulisan “HOME” berada menjadi “home”. Lalu 
ubah tipe layer menjadi mask dengan klik kanan pada layer tersebut dan 
pilih Mask. 

6. Buat dua layer lagi dan beri nama “abu-abu” dan "hitam" dan letakkan 


pada bagian bawah layer home seperti pada gambar: 






Es hitam 


Gambar 124. Layer Home 


7. Pada layer abu-abu buat objek kotak tanpa garis tepi dengan warna 


#CCCCCC dan posisikan seperti pada gambar: 





Gambar 125. Hasil 
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8. Copy frame 1 pada layer abu-abu dengan cara klik kanan pada frame lalu 
pilih copy frames. Lalu paste pada frame 1 layer hitam. 


KE home “Spl 
EH 4 o 
B? hitam . TO Create Motion Teen 
Insert Frame 
Kemas Pram 
- d3 4) mn Ireart Kevframe - 


Ea | Insert Blank Keyframe w 
Clear Kertrame 
Lornusi L kz Kevr Ne 


Corrsert ho Bank Keyframes 


Kut Frames 
Copy Frames 
Paste F 


Clear Frarmmes 
Select Al Frames 


Reverse Frames 
Is nct one SYTMO01s 





aciors 


Gambar 126. Frame 1 Layer Hitam 


9. Pada layer hitam ubah warna objek kotak tersebut menjadi hitam dengan 
cara seleksi objek kotak tersebut lalu klik pada fill color dan pilih warna 
hitam. lalu posisikan kedua objek kotak seperti pada gambar: 





Gambar 127. Fill color 
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10. Buat symbol movie clip pada kedua objek kotak dan beri nama “hitam” 
pada kotak hitam dan “abu-abu” pada kotak abu-abu dengan menekan 
F8. 





Gambar 128. Symbol Movieclip 


11. Buat motion tween pada objek kotak hitam dan juga kotak abu-abu 


dengan pergerakan seperti pada gambar: 


| Timeline | 3 ke) 


15 






BI home 
Pr abu-abu $ 


hitam 





Gambar 129. Motion Tween 
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abu-abu 


hitam 





Gambar 130. Hasilnya 


12. Buat layer baru dengan nama “script”. Lalu buat blank keyframe pada 
frame 10 dengan cara klik kanan pada frame 10 layer script dan pilih 


insert blank keyframe. 





Timekne t Ka 
a 3 Oi: Is 20 2 1 
La J | te rick 
rsate Motian 2 
BI hara 
BP abu-abu Era 
- Tikam mas Era 
net Keytreme 
sda Insert Eilank Kevframs | 
3 rar - 
I 


One R0 Keran 


Corner bo Olank Sestrames 


Cut Framis 


Dear Frames 
Select All Frame 






| acans 





Gambar 131. Script 


13. Dengan keadaan frame 10 pada layer script masih terseleksi tekan F9 


untuk membuka panel action dan ketikkan “stop():”. 
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Gambar 132. Layer script 


Script ini berfungsi untuk berhenti pada frame tempat script ini berada (dalam hal 
ini frame 10 pada layer script). Jika suatu frame sudah terdapat script di 
dalamnya maka keyframenya akan berubah menjadi seperti gambar: 


Timeline “3 - 
s4ADi 


15 2 





Li 7 B . 

BI home «. 1D 
EP abu-abu e. NM 
B3 hitam so | 


Gambar 133. Perubahan Keyframe 


14. Setelah itu kembali ke timeline utama dengan cara double klik pada stage 
atau klik pada tulisan Scene 1 seperti pada gambar: 


| Timeline | dag Ss 


ii 






Mz 





BJ home 1 jay 
abu-abu , 
hitam 1 





Gambar 134. Timeline 


15. Lalu buat symbol button dengan cara tekan ctri-F8 lalu isikan kotak 


dialog seperti pada gambar. Jangan lupa memilih type:button. 
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aa aji 


Mama: | home btn 


Type: £ Move clip cancel 
Gi) Button 


€ NGraphic (baduanced.| 
Gambar 135. Symbol button 





16. Isi dari symbol instance button ialah sebagai berikut: 


(mer 6 MKETN 


As (5 Li T- (ver LDownl HA 
MP tayeri Me 





Gambar 136. Symbol Instance Button 


Terdapat empat frame yaitu frame Up, Over, Down, dan Hit. 

- Frame Up berfungsi sebagai tampilan tombol pada kondisi awal 
sebelum ditekan. 

- Frame Over berfungsi sebagai tampilan ketika kursor mouse 
berada tepat di atas tombol. 

- Frame Down berfungsi sebagai tampilan tombol pada kondisi 
sedang ditekan. 


- Frame Hit berfungsi sebagai area tekan tombol tersebut. 


17. Lalu isikan frame Up dengan text "HOME" sama persis ukuran dan 
warnanya seperti yang telah dibuat sebelumnya dan letakkan tepat 
ditengah stage. 
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Gambar 137. Frme Up 


18. Lalu isi frame Over dengan cara buat blank keyframe dahulu pada frame 
Over lalu isikan dengan instance “home over" yang terdapat pada panel 
llbrary dengan cara mendragnya ke dalam stage dan letakkan tepat 
ditengah stage. 





£ # Library - Untitled-1 ka 
p 'Untitled-i se 9 Egg 
d items 





Ik) abu-abu Movie (Ol 
hitam Moe L 
di home btn Sutkon 
home, over Movie ( 
Bejo is) at 


Gambar 138. Frame Over 
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19. Lalu copy frame Up dan paste pada frame Down dan juga frame Hit. Hal 
ini akan menyebabkan tidak adanya perubahan ketika tombol ditekan 
dengan keadaan awal. Hasil akhir timeline akan seperti gambar: 


Tmelne || 0 NA ta 


4 2 





td ab mw 'ilawa W bl 4 Jan uas 


Gambar 139. Hasil Akhir 


20. Lalu kembali ke timeline utama dengan double klik pada stage. Klik kanan 


pada tulisan “HOME” yang terdapat pada stage dan pilih swap symbol. 


HEM cOkTaeT 
Luk 
Copy 













Paste 


Select All 
Deselect All 


Free Trareform 
Arang k 


Break Apart 
Distribute to Layess 


Edit 
Edit in Place 
Edit in hem in do 


Ado 


Swap Symbol... 
Duplcate Symbol, .. 


Oonsert bo Ssmbol.. 


Timeline Effects 


Gambar 140. Langkah selanjutnya 
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Gambar 141. Kotak dialog 


Yang dilakukan ini ialah menukar instance home over dengan instanve 


home btn 


22. Pada tahap ini telah diselesaikan pembuatan tombol “HOME”. Setelah itu 
lakukan hal yang sama untuk kedua tombol yang lain (CONTACT dan 
PRODUC T). 

23. Setelah semua tombol sudah selesai dibuat langkah selanjutnya adalah 
membuat script untuk link tombol dan juga membuat isi dari tiap tombol. 


24. Untuk membuat script navigasi link pada tombol klik pada tombol “HOME” 
yang ada pada stage lalu tekan F9 untuk membuka panel action dan 
ketikkan: 


on (release) | 
gotoAndStop ("home") : 
) 








 Aeikarii - atton : 
kolom i & Ori Rb A4 Saripi 
(ad Uas Par 1 # 
Ta Jalal Pa 2 1 
| pasa 4 
Ga ai Tere 
Ia : . 
Ka ta 
| Kg rr 
GA aa 
IBI 
Dat) So 
tj 
F aa bs ama Ini | m3 
Hy Tan | Kera Ca 


Gambar 142. Script navigasi 
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Script tersebut berfungsi untuk membuat ketika tombol ditekan maka akan 
berpindah dan berhenti pada frame “home”. 


25. Lakukan hal yang sama pada tombol “CONTACT” dan “PRODUCT” tapi 
bedakan alamat frame yang dituju. Untuk tombol contact: 


on (release)i 


gotoAndStop "contact"”), 





Mere Pi 


| tml ai 
Pa at 
PB) awas 
Taj Sar 
fa 
lal « 
aj 

nj Ter 
Pal 2 
Taj Data 
tj Nm 
Ea 
kel wa 





Gambar 143. Script pada tombol “CONTACT” 


Untuk tombol product: 


on (release)i 


gotoAndStop ("product"): 
) 











NN 6 
"nia Ian ls, 


Lo Ii ar (ap la bo al : 





aA at Irini - | h 


Gambar 144. Script pada tombol “PRODUCT” 
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26. Lalu buat layer baru dengan nama label. Seleksi frame 1 pada layer 
tersebut dan beri label dengan cara klik panel properties yang terdapat di 


bawah stage dan ketikkan nama “home” pada tempat seperti pada 
gambar: 





Aan Ka | era 


Pa ai 


Gambar 145. Cara membuat frame pada layer 


27. Buat blank keyframe pada frame ke 2 dan ke 3. Lalu beri nama label 


“contact” dan “product” dengan cara yang sama. 


28. Lalu posisikan keyframe tersebut dengan cara mendragnya seperti pada 


gambar: 
Timeline . Sena | 
at Oi z ui Is an 3, 2 # 
LP Lapar SD Ir 
anti ga Iwan joe fx 


Gambar 146. Posisikan keyframe tersebut dengan cara mendrag 


29. Lalu buat layer baru dan beri nama “script”. Dengan frame pertama masih 
terseleksi tekan F9 dan ketikkan stop): 


30. Buat layer baru dengan nama "isi" lalu buat blank keyframe dan posisikan 
seperti pada gambar: 


Tinsaesiran ii Scene i 
3 2 
& seript - Fl CO 
U tabal : TSB 
Ld 4 Oo 
9 Layer 1 2 3 





Gambar 147. Layer baru dan blank keyframe 


31. Pilih blank keyframe yang berada pada frame yang sama dengan label 
dan buat objek tulisan yang sesuai dengan nama label tersebut. 
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Gambar 148. Blank keyframe dan buat objek tulisan 


32. Lakukan juga untuk semua label yang dibuat. 





Gambar 149. Semua label yang dibuat menggunakan blank keyframe 


33. Lalu langkah terakhir ialah klik kanan pada frame 35 pada layer 1 dan 
pilih insert frame. Test contoh interaksi tombol yang telah kita buat 
dengan menekan ctri-enter. Dapat dirubah isi dari lembar tujuan tombol 


sesuai dengan yang dinginkan dengan merubah isi frame pada layer "isi". 
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Gambar 150. Insert frame dengan menekan ctri-enter 


c. Rangkuman 

Button adalah salah satu type dari symbol. Button digunakan untuk membuat 
tombol di flash. Dengan dijadikannya suatu objek menjadi button maka selain 
objek tersebut menjadi tombol, objek tersebut juga dapat menggunakan 
beberapa fasilitas dari flash seperti animasi tween, masking, guide dan juga kita 
dapat memberikan actionscript pada objek tersebut. Melalui cara dasar ini dapat 
dikreasikan untuk membuat tombol yang bagus dan menarik. Terdapat empat 
frame yaitu frame Up, Over, Down, dan Hit. Frame Up berfungsi sebagai 
tampilan tombol pada kondisi awal sebelum ditekan. Frame Over berfungsi 
sebagai tampilan ketika kursor mouse berada tepat di atas tombol. Frame Down 
berfungsi sebagai tampilan tombol pada kondisi sedang ditekan. Frame Hit 


berfungsi sebagai area tekan tombol tersebut. 


d. Tugas : Membuat Tombol Link ke halaman lain 


Dalam kegiatan ini setiap peserta didik membuat tombol link ke halaman lain 
software macromedia flash atau adobe flash. Berdasar uraian materi diatas 
lakukan langkah-langkah berikut: 

«& 11. Buka file baru pada software flash atau Ctrl--N. 
P 1.2. Buatlah tombol link ke halaman lain sesuai langkah-langkah 


seperti dalam uraian diatas 
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1.3.  Presentasikan hasil animasi yang telah dibuat siswa di depan 
kelas 


e. Test Formatif. 

Dalam test ini setiap peserta didik membaca dengan cermat dan teliti setiap butir 
soal dibawah ini. Kemudian berdasarkan uraian materi diatas tulislah jawabannya 
pada lembar jawaban test formatif yang telah disediakan. 

£ 1. Jelaskan pengertian dan fungsi Button? 


2. Jelaskan fungsi dari empat frame Up, Over, Down, dan Hit? 


f. Lembar Jawaban Test Formatif (LJ). 


LJ- 01 : Pengertian dan fungsi Button 
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g. Lembar Kerja Peserta Didik. 


113 |Page 





Teknik Animasi 2 Dimensi 





a. Tujuan Pembelajaran. 


Setelah mengikuti kegiatan belajar 9 diharapkan siswa dapat: 
“ Mengetahui Pengertian scene dalam film 
“ Memahami Pengertian Scene dalam film 
“ Mengetahui Pengertian scene pada aplikasi animasi 2D 
“ Memahami Pengertian Scene pada aplikasi animasi 2D 


b. Uraian materi 
1) Pengertian Scene dalam Film 

Istilah Scene pertama kali di perkenalkan dalam dunia sinematografi. Scene 
ini digunakan untuk pengambilan gambar adegan suatu cerita. Pengambilan 
gambar sebuah film cerita, sinetron ataupun drama, dilakukan scene by scene 
yaitu adegan per adegan.Oleh karena itu sebaiknya dipahami dulu pengertian 
tentang SCENE. Scene adalah adegan. Naskah film cerita maupun sinetron 
disusun berdasarkan scene demi scene. 
Pengertian sebuah SCENE adalah : sebuah adegan yang terjadi dalam suatu 
lokasi yang sama, pada saat yang juga sama. 

Misalnya adegan di sebuah kantin sekolah. Maka sepanjang adegan- 
adegan yang berlangsung dalam kantin tersebut berlangsung dalam saat yang 
sama, maka adegan itu dikelompokkan dalam sebuah scene. 

Namun posisi pengambilan gambar dalam kantin tersebut boleh saja 
berpindah-pindah, asal masih dalam lingkungan kantin tersebut. Artinya boleh 
saja sebuah scene terdiri dari lebih dari shot atau sudut pengambilan gambar. 
Jadi satu scene dapat terdiri dari beberapa shot, untuk mendapatkan gambaran 
dari sebuah scene, adegan-adegan dalam scene dapat dipecah-pecah menjadi 
beberapa shot. 

Scene adalah sering diartikan sebagai tempat atau setting di mana 
sebuah cerita akan dimainkan, hal ini tentu saja terpengaruh dari dunia teater 
atau panggung. Sebuah Scene bisa terdiri dari beberapa shot atau bisa saja satu 
shot panjang yang disebut sebagai Seguence shot. Seguence adalah rangkaian 


dari beberapa shot dalam satu kesatuan yang utuh. 
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Dengan demikian Scene memberi definisi tempat atau setting dimana 
kejadian dilangsungkan. Hal ini bisa dilihat dari produksi teater, dimana sebuah 
babak bisa dibagi dalam sejumlah scene, masing — masingnya berlangsung pada 
lokasi yang berbeda. 

Satu scene bisa terdiri dari satu shot atau sejumlah shot yang 


menggambarkan peristiwa yang bersinambungan. 


How to Film' storyboard - part 1 





1. Wide Shot 2 both Sarah and Calum 2, Close up ol Saran speaking directly 3, Low angle camera peintng up at 
Musiatng wara Tip are ar what ve to cawan Cadtuen 
Glen 19 ana 
Song Sarah Sen: Calumn 
Ore trang you musi Oops! Saran is ngtu! forget ali ires 
aways remember keep € sarmgle 





4. Close up cf Sarah holding photograph &. Camera z00m5 out to Wide Shot s0 6. Over Shoukdler shot of Cakum ponting 
wa can see Sarah spasing abo eng lo dramings of different shots that you 
pnotographs lo plan your storyboard could try Sarang 


Gambar 151. Contoh Storyboard dengan beberapa Scene di dalamnya 


Contoh : film up yang aktornya ellie dan carl mereka sedang berdialog di 
dalam rumah dengan ditutupi oleh selimut dan digantungkan dengan sehelai tali 
yang membentuk sebuah tenda kemah dalam adengan tersebut terdiri dari 
beberapa shot dari detik ke 0:05 kurang lebihnya sampai ke detik 0:30 
Shot mendefinikan suatu rangkaian gambar hasil rekaman kamera tanpa 
interupsi. Tiap shot adalah satu take. Apabila dibuat shot tambahan diambil dari 
set — up yang sama di sebabakan karena kesalahan teknik atau dramatic shot — 
shot tambahan itu dinamakan re — take. Kalau set — up diubah dalam satu dan 
lain cara kamera berpindah, lensa berubah atau action lain yang diambil itu 
adalah shot baru, bukan sebuah re- take. 

Contoh: film up adegan berdialog Ellie dan Carl dari detik ke 0:5 sampai 
detik ke 0:35. Sebuah seguence adalah serangkaian atau shot — shot, yang 
merupakan suatau kesatuan utuh. Sebuah seguence bisa berlangsung pada satu 


setting atau di beberapa setting. Action harus berkait secara tepat dalam sebuah 
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seguence manakala terdiri dari sejumlah shot yang runtut dengan cut langsung 
hingga melukiskan kejadian yang berlangsung sebagaimana kenyataan 
sebenarnya. 

Sebuah seguence bisa dimulai sebagai adegan exterior, dan dilanjutkan 
di dalam gedung, karena sang pemain masuk dan terlibat percakapan atau 


lainya. Sebuah seguence bisa dimulai atau diakhiri dengan sebuah “ fade “ atau " 


kk kk 


dissolve ", atau bisa pula dengan “ cut “ langsung dengan mengelompokkan 
semua seguence. 
2) Pengertian Scene pada aplikasi animasi 2D 

Dalam dunia animasi istilah scene diadopsi sebagai wadah atau tempat 
mengumpulkan adegan gambar panel dan frame yang senada. Misalkan, saat 
membuat cerita animasi berdurasi panjang, maka sangat dibutuhkan pembagian 
dalam beberapa scene.. Walaupun penggunaan Scenes memiliki beberapa 
kerugian, ada bebera situasi yang memang harus melewati kerugian ini, seperti 


ketika kita memproduksi animasi yang cukup panjang. 


Tile: 





DAL OR FLOYD: H...YEAH... WE COULD POSE AS ARTISTS AND 
: OR, Pen : ASK TO PAINT HIS PORTRAIT 





DR. FLOYD: WE SHOULD POSE AS 
, ARTISIS AND ASK TO PAINT HIS 
NOW, WHICH ONE DO YOU PORTRAIT 
Tnink WE SHOULD TE? DR. GRANT: OH OKAT, 


WEML 00 IT 
YCUR WAY THIS TIME. 


Gambar 152. Contoh Storyboard dengan beberapa Scene di dalamnya 
Dari contoh gambar diatas tersebut, scene bisa bisa dibuat dalam satu 


panel, tapi juga tidak menutup kemungkinan terdiri dari dari beberapa panel. 


Seperti contoh di gambar dibawah ini 
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Scene 1 panel 3 Scene 1 panel 4 


Gambar 153. Contoh Scene dengan beberapa panel 


3) Istilah Scene pada Aplikasi Flash 

Bila Animasi adalah filmnya, maka scene adalah episodenya, dengan 
scene kita bisa mengatur susunan adegan dalam animasi. Dengan demikian 
akan lebih terorganisir terutama bila melibatkan berbagai menu dan lompatan isi. 
Scene hanya ada untuk memudahkan anda dalam mengorganisir, tidak berbeda 
dengan yang lainnya, kita bisa cut, paste, dan lain-lain. 


Tip: Biasakan menggunakan scene untuk setiap perbedaan isi pada animasi 


anda, misalkan untuk pembukaan, isi, dan penutup. 


Tip: Scene dapat diduplikasi sehingga bila anda menginginkan beberapa 
peristiwa yang sama urutannya, namun berbeda beberapa propertinya...buat 
dahulu base-nya kemudian duplicate, dan terapkan perubahan yang anda 
inginkan. 


Timeline 
Jendela panel yang digunakan untuk mengelompokkan dan mengatur isi atau 


gerak sebuah movie atau simbol, panel time line ini berisi: 
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1. scene 

merupakan tempat berbagai kejadiandi dalam stage di dalamnya meliputi layer 
dan frame 

2. layer 

merupakan tempat dimana kita menampung objek dalam satu scene 

3. frame 

merupakan tempat kita mengatur animasi bagian perbagian yang di kelompokan 
dalam sebuah layer 

4. Stage 


adalah area putih dimana kita bekerja dengan objek di dalam flash 


Adobe Flash CS3 Professional - (Untitled-1”) SB: &) 


Untitled-1” | 
saOl s 10 


Be 12.0fps 00s «|. 





1x 
: 
wi 
2 
9. 
T 
N 
Uu, 
2 
f 
Pa 
2 
2 
re 4 


Gambar 154. Contoh menu scene pada adobe flash 


Scene ini bisa diartikan semacam membuat flash document baru namun 
dengan settingan flash document pertama yang anda buat. Scene ini cocok 
digunakan bagi anda yang membuat presentasi, pembelajaran interaktif, game 
yang membutuhkan pembagian beberapa menu seperti opening, main menu, 
ending. Sebenarnya hanya dengan menggunakan 1 buah scene bisa dilakukan 
tetapi nanti framenya akan terlihat panjang sekali. Oleh karena itu apabila anda 
menggunakan beberapa  menusebaiknya  gunakanscene tambahan. 
Karateristik dan cara kerja scene adalah sebagai berikut, ketika frame pada 
timeline scene pertama habis untuk dimainkan maka secara otomatis akan 
langsung berpindah ke frame padatimeline scene kedua. Apabila frame 
padatimeline scene kedua habis untuk dimainkan maka otomatis 
akan memainkan frame pada timelinescene ketiga dan begitu seterusnya. Untuk 


mengatasinya anda perlu menggunakan actionscript, misalnya stop/). 
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c. Rangkuman. 

Istilah Scene pertama kali di perkenalkan dalam dunia sinematografi. 
Scene ini digunakan untuk pengambilan gambar adegan suatu cerita. 
Scene adalah adegan. Naskah film cerita maupun sinetron disusun 
berdasarkan scene demi scene. Scene adalah : sebuah adegan yang terjadi 
dalam suatu lokasi yang sama, pada saat yang juga sama. 

Sebuah Scene bisa terdiri dari beberapa shot atau bisa saja satu shot 
panjang yang disebut sebagai Seguence shot. Seguence adalah rangkaian dari 
beberapa scene dan shot dalam satu kesatuan yang utuh. 

Dalam dunia animasi istilah scene diadopsi sebagai wadah atau tempat 
mengumpulkan adegan gambar panel dan frame yang senada. Bila Animasi 
adalah filmnya, maka scene adalah episodenya, dengan scene kita bisa 
mengatur susunan adegan dalam animasi. Scene hanya ada untuk memudahkan 
anda dalam mengorganisir, tidak berbeda dengan yang lainnya, kita bisa cut, 
paste, dan lain-lain. 

Biasakan menggunakan scene untuk setiap perbedaan isi pada animasi 
anda, misalkan untuk pembukaan, isi, dan penutup. 

Scene dapat diduplikasi sehingga bila anda menginginkan beberapa 
peristiwa yang sama urutannya, namun berbeda beberapa propertinya...buat 
dahulu base-nya kemudian duplicate, dan terapkan perubahan yang anda 
inginkan. 

Scene ini bisa diartikan semacam membuat flash document baru namun 
dengan settingan flash document pertama yang anda buat. Oleh karena itu 
apabila anda menggunakan beberapa menu sebaiknya gunakan scene 
tambahan. Karateristik dan cara kerja scene adalah sebagai berikut, ketika 
frame pada timeline scene pertama habis untuk dimainkan maka secara otomatis 
akan langsung berpindah ke frame pada timeline scene kedua. Apabila frame 
padatimeline scene kedua habis untuk dimainkan maka otomatis 


akan memainkan frame pada timeline scene ketiga dan begitu seterusnya 
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d. Tugas. 
Membuat Ringkasan Materi Pengertian Scene Pada Aplikasi Animasi 2D 
Sebelum mengerjakan tugas, buatlah kelompok terdiri atas 2-3 orang. 
Dalam kegiatan ini peserta didik akan membuat ringkasan materi berbagai jenis 
Pengertian Scene kemudian mengamati dan mengidentifikasinya. Masing- 
masing kelompok mebuat ringkasan untuk Definisi Scene. Kemudian secara 
bergantian masing-masing kelompok mempresentasikan hasilnya didepan kelas. 
« 1.4. Bacalah uraian materi diatas dengan teliti dan cermat. 
? 1.5. Buatlah ringkasan materi untuk jenis animasi (sesuai dengan yang 
ditentukan) menggunakan software pengolah presentasi. Topik 
yang di tulis meliputi 1) Pengertian Scene dalam film, 2) 
Pengertian scene pada aplikasi animasi 2D 
1.6. Presentasikan hasil ringkasan di depan kelas. 


e. Test Formatif. 

Dalam test ini setiap peserta didik wajib membaca dengan cermat dan teliti setiap 
butir soal dibawah ini. Kemudian berdasarkan uraian materi diatas tulislah 
jawabannya pada lembar jawaban test formatif yang telah disediakan. 


2 1. Jelaskan Pengertian isitilah scene dalam film 


2. Jelaskan pengertian isitilah sguence dalam film 
« 3. Jelaskan Pengertian isitilah scene pada Aplikasi animasi 2D 
.& 4. Jelaskan Pengertian isitilah Panel pada aplikasi animasi 2D 
7 5. Jelaskan Kelebihan Scene pada produksi Animasi 2D 


f. Lembar Jawaban Test Formatif (LJ). 


LJ- 01 : Pengertian Scene dalam bidang film 
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LJ- 05 : Kelebihan menggunakan Scene pada aplikasi 2D 
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g. Lembar Kerja Peserta Didik. 
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a. Tujuan Pembelajaran. 


Setelah mengikuti kegiatan belajar 10 diharapkan siswa dapat: 
“ Memahami penggunaan scene pada film 
“ Memahami penggunaan scene pada Aplikasi animasi 2D 
“ Mampu menerapkan penggunaan scene pada adobe flash 
“ Mampu mengeksplorasi penggunaan scene pada adobe flash 


b. Uraian materi 

Untuk pengambilan gambar adegan suatu cerita, ada beberapa hal lagi 
yang perlu diketahui. 

Pengambilan gambar sebuah film cerita, sinetron ataupun drama, 
dilakukan scene by scene. Scene digunakan untuk pengorganisasian file — file 
yang hendak di animasikan agar lebih rapi dalam proses produksi dan 
memperingan beban kerja tim. Dengan adanya scene maka tipe-tipe dari shot 
dibagi dalam beberapa bagian, hal ini akan sangat membantu pada komunikasi 
visual. 

Pada aplikasi animasi 2D seperti adobe flash penggunaan scene 
dibutuhkan untuk mengedit animasi yang Panjang dan membaginya ke dalam 
beberapa bagian. Scene ini cocok digunakan bagi anda yang membuat 
presentasi, pembelajaran interaktif, game yang membutuhkan pembagian 
beberapa menu seperti opening, main menu, ending. Sebenarnya hanya dengan 
menggunakan 1 buah scene bisa dilakukan tetapi nanti framenya akan terlihat 
panjang sekali. Oleh karena itu apabila anda menggunakan beberapa 
menu sebaiknya gunakan scene tambahan. 

Penggunaan Scene pada aplikasi adobe Flash 

Untuk menggunakan scene ini, pertama hal yang anda lakukan adalah 

memunculkan panel scene terlebih dahulu dengan menekan Shift-F2 atau 


melalui menu bar Window-Other Panels-Scene. 
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Gambar 155. Panel science 


# Setelah panel scene muncul anda dapat menambahkan scene pada flash 
document anda dengan menekan tombol - pada panel scene tersebut. 

#« Untuk menduplikasi scene yang sudah ada anda dapat menekan tombol 
duplicate scene yang berada di sebelah kiri tanda --. 

#« Untuk membuka scene, klik sekali nama scene yang diinginkan pada 
panel scene. 

# Untuk mengubah nama scene, klik dua kali (double klik) nama scene 
pada panel scene yang ingin dirubah namanya. Kemudian rubah 
namanya sesuai keinginan anda. 

#« Untuk menghapus scene, seleksi terlebih dahulu scene yang anda ingin 
hapus dengan mengkliknya pada panel scene. Kemudian tekan tombol 
delete scene yang terletak disebalah kanan tombol - pada panel scene. 

Untuk contoh penggunaannya silahkan lihat contoh berikut ini : 

1. Buatlah sebuah flash document. 

2. Buatlah 1 buah dyanmic text bertuliskan Pindah Scene. Seleksi dyanmic text 
tersebut dan tekan Ctrl-F3. pada panel properties yang muncul 
nonaktifkan tombol selectable dan aktifkan tombol show border around text. 

3. Pastikan anda masih menyeleksi dyanmic text tadi kemudian tekan F8. Pada 
panel yang muncul masukkan pindah btn sebagai name dan button sebagai 


type lalu tekan ok. 
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4. Seleksi button pindah btn dan pada panel propertiesnya masukkan 
pindah btn sebagai instance name. 

5. Klik frame 1 dan tekan F9. Pada panel actions yang muncul masukkan script 
berikut : 


//menghentikan jalannya frame 

stop (): 

//ketika pindah btn ditekan 

pindah btn.onPress -— function () | 
//mainkan frame 1 Scene 2 
gotoAndPlay ("Scene 2", 1): 


al Gr OTS WK Kk 


Ig 


6. Tekan Shift-F2 dan pada panel scene yang muncul tekan tombol - sekali 
maka akan muncul scene baru bernama Scene 2 sekaligus anda akan berpindah 
ke scene baru tersebut. 

/. Pada stage scene baru buatlah sebuah static text bertuliskan Ini adalah 
scene 2. 


8. Klik frame 1 dan tekan F9. Pada panel actions yang muncul masukkan script 
berikut : 


1 //menghentikan jalannya frame 
2 Gopi 


9. Tekan Ctrl-Enter untuk melihat hasilnya. 


“Silahkan tekan tombol pindah scene, anda secara otomatis akan berpindah 
ke scene 2. 


c. Rangkuman. 

Scene digunakan untuk pengorganisasian file — file yang hendak di 
animasikan agar lebih rapi dalam proses produksi dan memperingan beban kerja 
tim. Dengan adanya scene maka tipe-tipe dari shot dibagi dalam beberapa 
bagian, hal ini akan sangat membantu pada komunikasi visual. 

Pada aplikasi animasi 2D seperti adobe flash penggunaan scene 
dibutuhkan untuk mengedit animasi yang Panjang dan membaginya ke dalam 
beberapa bagian. Scene ini cocok digunakan bagi anda yang membuat 
presentasi, pembelajaran interaktif, game yang membutuhkan pembagian 
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beberapa menu seperti opening, main menu, ending. Sebenarnya hanya dengan 
menggunakan 1 buah scene bisa dilakukan tetapi nanti framenya akan terlihat 
panjang sekali. Oleh karena itu apabila anda menggunakan beberapa 
menu sebaiknya gunakan scene tambahan. 

Pada adobe Flash untuk menggunakan scene ini, pertama hal yang anda 
lakukan adalah memunculkan panel scene terlebih dahulu dengan menekan 
Shift-F2 atau melalui menu bar Window-Other Panels-Scene. 


d. Tugas. 
Membuat Ringkasan Materi Pengertian Scene Pada Aplikasi Animasi 2D 
Sebelum mengerjakan tugas, buatlah kelompok terdiri atas 2-3 orang. 
Dalam kegiatan ini peserta didik akan membuat ringkasan materi berbagai jenis 
Pengertian Scene kemudian mengamati dan mengidentifikasinya. Masing- 
masing kelompok mebuat ringkasan untuk Definisi Scene. Kemudian secara 
bergantian masing-masing kelompok mempresentasikan hasilnya didepan kelas. 
«11. Bacalah uraian materi diatas dengan teliti dan cermat. 
2 1.2. Buatlah ringkasan materi penggunaan scene untuk aplikasi 
animasi 2D menggunakan software pengolah presentasi. Topik yang 
di tulis meliputi 1) Penggunaan Scene yang tepat, 2) Langkah langkah 
membuat scene di adobe flash 
1.3.  Presentasikan hasil ringkasan di depan kelas. 


e. Test Formatif. 
Dalam test ini setiap peserta didik wajib membaca dengan cermat dan teliti setiap 
butir soal dibawah ini. Kemudian berdasarkan uraian materi diatas tulislah 
jawabannya pada lembar jawaban test formatif yang telah disediakan. 

A1. Bagaimana penggunaan scene dalam film 
2 2. Bagaimana Penggunaan scene pada aplikasi 2D 


Bagaimana penggunaan Scene dalam adobe flash 
Bagaimana cara kerja scene dalam adobe flash 
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f. Lembar Jawaban Test Formatif (LJ). 


LJ- 01 : Penggunaan Scene dalam bidang film 
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LJ- 04 : Cara kerja Scene pada adobe flash 


129 (Page 


Teknik Animasi 2 Dimensi 





g. Lembar Kerja Peserta Didik. 
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a. Tujuan Pembelajaran. 


Setelah mengikuti kegiatan belajar 11 diharapkan siswa dapat: 
“ Memahami penggunaan scene pada adobe flash 
“ Mampu menerapkan penggunaan scene pada adobe flash 
“ Mampu mengeksplorasi penggunaan scene pada adobe flash 


b. Uraian materi 
Penggunaan Scene pada adobe flash 

Langkah pertama yang harus dilakukan adalah membuka program adobe 
flash pada system operasi. Kemudian buka aplikasi adobe flash dan buka 


dokumen baru : 


1) Dokumen flash baru 


In ak Lecet di Nae 
1 0 aa yg . 





Gambar 156. Dokumen flash baru 


131 | Page 








Teknik Animasi 2 Dimensi 


2) Lalu buka dokumen baru dengan memilih action script 2.0, 


MA Aa aldi 


| General Templates | 


Type: Description: 


a Flash File (ActionScript 3.0) Create a new Flash document (#,fFla) in the Flash Document 
£ Flash File (ActionScript 2.0) window, The Publish Settings will be set For ActionScript 
: , " 2.0, Use Flash documents to set up the media and structure 
Ti Flash File (Mobile) for Flash movies and applications. 
a Flash Slide Presentation 


n Flash Form Application 
7 ActionScript File 


1 ActionScript Communication File 
"5 Flash JavaScript File 
" Flash Project 














Gambar 157. Action script 


Panel Properties 


| 5 Properties x | Fiters | Parameters | 


FI Document Size: Background: & Frame rate: | 12 fps 
| Untitlad-1 Publish: Player: 9 ActionScripk: 300 Profile: Defauk 


Dooument dass: 2 


Gambar 158. Area kerja Adobe Flash 
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4) Untuk memulai membuat animasi, maka terlebih dulu kita pilih menu 


insert» Scene 











New Symbol... Ctrl- F8 


Timeline b 


Timeline Effects p 


IM Iu Bu Baal aua jau A 





Scene 





Gambar 159. Menu insert » Scene 










5) Dengan demikian kita sudah memiliki scene 1 pada dokumen adobe 
flash, 

File Edit” Waw Insert Modify  Pert kommiandg ““Lont £ Help 

ag aa BT 

N kecorenneseansar | : 

$ 

An aa 

Pom 

"RN 7 Mistis ten «PS 
TT lUntitled-t——— | Ga 
» One item in library 

a 

" 4 

# 

e 25 Al Name Type &| 
7 MEROBAN .noo.. MNA 
. : 


Gambar 160. Dokumen adobe flash 


6) Untuk membuat scene berikutnya ikuti langkah — langkah seperti diatas, 
sesuai kebutuhan produksi 


c. Rangkuman. 

Pada adobe Flash untuk menggunakan scene ini, pertama hal yang anda 
lakukan adalah memunculkan panel scene terlebih dahulu , sehingga muncul 
symbol seperti gambar di bawah ini : 


133 (Page 





Teknik Animasi 2 Dimensi 





7 
File Edit View | Insert! Modify Text Commands Cor 
Insert | Modify Cor 

New Symbol... Ctri- F8 








Timeline k 


Timeline Effects b 





Scene 


Gamabar 161. Panel Science 


Dengan munculnya symbol Scene 1 berarti kita telah memiliki satu scene 


dalam dokumen flash. Dan Scene bisa di tambahkan sesuai kebutuhan produksi. 


d. Tugas. 
Membuat Scene Pada Aplikasi Adobe Flash 
Sebelum mengerjakan tugas peserta didik Mengamati dan memahami 
kembali uraian tentang langkah langkah penggunaan scene pada adobe flash. 
Masing-masing siswa membuat ringkasan cara menggunakan scene pada adobe 
flash. Kemudian secara bergantian masing-masing siswa mempresentasikan 
hasilnya didepan kelas. 
2 11. Bacalah uraian materi diatas dengan teliti dan cermat. 
Pt 1.2. Buatlah ringkasan langkah langkah penggunaan scene pada 
adobe flash menggunakan software pengolah presentasi. 
1.3.  Presentasikan hasil ringkasan di depan kelas. 
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e. Test Formatif. 

Dalam test ini setiap peserta didik wajib membaca dengan cermat dan 
teliti setiap butir soal dibawah ini. Kemudian berdasarkan uraian materi diatas 
tulislah jawabannya pada lembar jawaban test formatif yang telah disediakan. 


£ 1. Gambarkan dan jelaskan menu untuk membuat scene pada 
pe adobe flash 


In 


Bagaimana Langkah langkah membuat Scene dalam adobe flash 
Berapakah scene yang di butuhkan untuk produksi animasi dalam 


adobe flash 


f. Lembar Jawaban Test Formatif (LJ). 


LJ- 01 : Menu untuk membuat scene pada adobe flash 
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g. Lembar Kerja Peserta Didik. 
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a. Tujuan Pembelajaran. 


Setelah mengikuti kegiatan belajar 12 diharapkan siswa dapat: 
“ Memahami penggunaan scene pada adobe flash 
“ Mampu menerapkan penggunaan scene pada adobe flash 
“ Mampu mengeksplorasi penggunaan scene pada adobe flash 


b. Uraian materi 

Penggunaan Scene 1 : membuat animasi sederhana pada adobe flash 
Langkah pertama yang harus dilakukan adalah membuka program adobe 

flash pada system operasi. Kemudian buka aplikasi adobe flash dan buka 

dokumen baru 


1) Buatlah scene 2 pada dokumen anda (lihat materi sebelumnya) 
2 


File Edit View | Insert Modify Text Commands Control Debug N 














Nanas an New Symbol... Ctrl- F8 
Timeline b 15 20 2 
Timeline Effects p 


Scene 





Gambar 162. Science 2 pada dokumen 
2) Lalu rename layer 1 menjadi layer kepala, pada stage gambarlah 


lingkaran menggunakan oval tool dan atur properties (size dan warna) sesuai 


kebutuhan 
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3333 
tts &, Scene 
oval tool 










atur propertiesnya 


NT RPG IN Yon kOjae one” 


Ov$ 





Gambar 163. Lingkaran menggunakan Oval Tool dan atur properties 


3) Buatlah bola mata pada lingkaran lalu atur properties warna menjadi putih 





diy Teat Commands Control Debug Window Help 


SNI IN AGAN YSIKKO/ HET 





Gambar 164. Lalu atur properties warna menjadi putih 


4) Buat layer 2 dan rename menjadi layer mata 





File Edit View Insert Modify Text Commands Control Debug Window Help 
LL 


Untitled-1" | 


Na 


Ot. 





1 sa3 lADUaG ai 20fPs O0s « 
an & scene 1 


IN PANGAN O/2 





9 


Gambar 165. Buat layer 2 menjadi Layer mata 
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5) Buatlah bola mata di layer mata, lalu convert to symbol 


Li 
File Edit View Insert Modify Text Commands Control Debug Window Help 
» 


Cut 
a 4 s 10 15 20 25 MW 3s Copy 
HI Paste 
Copy Motion 
Copy Motion as ActionScnpt 3.0... 
Paste Motion 


Paste Motion Special... 
as. 


cba & Scene 1 


Select All 
Deselect All Workspace " & Li, 


Free Transform 
Distort 


Envelope 


Smooth 
Straighten 


Distribute to Layers 
Convert to Symbol... 


Timeline Effects 


IN 2G hb OSK KO/He NI. 


1S 


Gambar 166. Lalu convert to symbol 


Adobe Flash CS3 Professional - (Untitled-1"J 


Insert Modif Tet Commands Control Debug Window Help 





Name: | bola mata 





Type: (Movie dip Registration: Gas 
A3 0 “ (Button 


khas & scene 1 — 







IN PEP BANOOAKO/H2 


S 


Gambar 167. Hasilnya 
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sehingga tampak seperti dibawah ini 


File Edit View Insert Modify Text Commands Control Debug Window Help 


Untitled-1" | 





sa ol S 10 15 
k 1 mata Ah (0 

1 UU kepala . . M | 

Di 

— 

9 lusoa Lagu 1 nofs Os « 
T Ndz ff Scene 1 

N 

4, 

2 

JS 

? 

LD 

2 

AD 

W 

a 

2 

2 

m Ik 


Gambar 168. Hasil Akhir 


6) Selanjutnya buatlah animasi tweening dengan 30 frame , pada bola mata 
tersebut dengan menggerakannya ke kanan dan ke kiri (lihat materi tweening 
dan keyframe) 


bal NG 


v3». 


IN PUBLIK O/HE 


2 

| « 
-. 
a 

n 





Gambar 169. Buatlah animasi tweening dengan frame 
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7) Jika animasi tweening pada layer mata sudah sukses, maka publish lah 
dengan menekan tombol ctrl tenter pada keyboard, 


Adobe Flash CS3 Professional - (Untitled-1"J - 0 
File Edit View Insert Modify Text Commands Control Debug Window Help 


7 


V 


— — File View Control Debug 
asa 


kas - Scene1 





“3 
3 
1 
@ 
2 
# 
& 
2 
2 
9 
G 
&a 
2 


| 8 Properties x | Filters | Parameters | 


Tween: None 


Ss NS 





Gambar 170. Publishlah dengan menekan tombol ctrl-enter 


8) Pada jendela monitor diatas animasi akan terlihat dimana emoticon 


menggerakan bola mata ke kanan dan ke kiri. 


Penggunaan multiscene untuk animasi sederhana pada adobe flash 

Dari materi diatas, siswa sudah mempelajari animasi sederhana 
(tweening) menggunakan scene 1. Jika kita putar maka scene 1. Tapi ketika 
sudah menjadi file yang siap di jalankan urutan seguence animasi nya adalah 
sebagai berikut: 
Scene 1 
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Gambar 171. Science siap dijalankan 


c. Rangkuman. 

Pada aplikasi animasi 2D seperti adobe flash, scene adalah pengarsip 
semua gambar grafik, symbol ,audio atau teks. Dimana gambar grafik, audio , 
symbol dan teks bisa terpisah menjadi layer yang berbeda — beda. 

Kompleksitas unsur unsur penyusun animasi tersebut bisa teroganisir dengan 


baik menggunakan scene 


d. Tugas. 
Membuat MultiScene untuk animasi sederhana (tweening) 

Sebelum mengerjakan tugas peserta didik Mengamati dan memahami 
kembali uraian tentang langkah langkah penggunaan satu scene untuk animasi 
sederhana (tweening) pada adobe flash. Masing-masing siswa membuat animasi 
tweening dengan menggunakan satu scene pada adobe flash. Kemudian secara 
bergantian masing-masing siswa mempresentasikan hasilnya didepan kelas. 

«11. Bacalah uraian materi diatas dengan teliti dan cermat. 
£ 1.2. Buatlah tweening motion menggunakan satu scene pada adobe 
flash menggunakan software pengolah presentasi. 

1.3.  Presentasikan hasil ringkasan di depan kelas. 


e. Test Formatif. 

Dalam test ini setiap peserta didik wajib membaca dengan cermat dan 
teliti setiap butir soal dibawah ini. Kemudian berdasarkan uraian materi diatas 
tulislah jawabannya pada lembar jawaban test formatif yang telah disediakan. 

«& 1. Gambarkan dan jelaskan langkah langkah membuat animasi 
2 sederhana menggunakan satu scene pada adobe flash 
2. Jelaskan kedudukan scene dan layer pada adobe flash, saat 


membuat animasi 
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f. Lembar Jawaban Test Formatif (LJ). 


LJ- 01 : Skema animasi sederhana menggunakan satu scene pada flash 
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g. Lembar Kerja Peserta Didik. 
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a. Tujuan Pembelajaran. 


Setelah mengikuti kegiatan belajar 13 diharapkan siswa dapat: 
“ Memahami penggunaan scene pada adobe flash 
“ Mampu menerapkan penggunaan scene pada adobe flash 


“ Mampu mengeksplorasi penggunaan scene pada adobe flash 


b. Uraian materi 
Penggunaan Scene 2 : lanjutan animasi sederhana pada adobe flash 
Langkah pertama yang harus dilakukan adalah membuka program adobe 


flash pada system operasi. Kemudian buka aplikasi adobe flash dan buka 
dokumen baru. 


1) Buatlah scene 2 pada dokumen anda (lihat materi sebelumnya) 


File Edit View | Insert Modify Text Commands Control Debug Window Hel 








NS SS PSM SSNASKU/BOenEaa 


Gambar 172. Buatlah science2 pada dokumen anda 
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2) Lalu copy paste kan gambar emoticon (lihat pertemuan sebelumnya) 


Color x | swatches | 
Trpe: Sold 


2» 


Copy Motion as ActionScript 3.0 


“ 
P n . 
AO» 
Paste Motion & R:'0o “ 
2 t « Paste Motion Special... » G:|0 “ - 
& Scme2 Select AN 1 i v mo Iv - 


Deselect AN - Mpha: | 1001 Iw | 2000000 


Free Transform 
Distort 

Ervelope 

Smooth 

Straighten 
Distribute to Layers 
Convert to Symbol... 


Timeline Effects 


Properties « | Fitters | Parameter 


(& Shape “|jl|w» Aa 
" » 
— A " Stroke hunting Scale: 


W: 2290 Xx: 160.9 


8 H: 290 y: 91.5 





Gambar 173. Hasil copy paste gambar emoticon 


3) Buatlah animasi bola mata ke atas dan ke bawah, seperti langkah 
langkah di scene 1 


File Edit View Insert Modify Text Commands Control Debug Window Help 


Untitled-1" | 


- 


1 23 & (3 20 120p 6s « 


us & Scene 2 


PGN OSIKKO/ HE OR. 





-. 
. NS 


as 


Tween: Motion 


Ease: 0 “ 


Rotate: Auto 


JOnenttopath (viSync (wiSnap 





Gambar 174. Animasi bola 
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4) Setelah sukses lalu publishlah menggunakan shortcut ctrl - enter 


bersamaan, 





Gambar 175. Lalu publishlah menggunakan shortcut ctri-enter bersamaan 


Pada jendela tersebut akan terlihat animasi mata yang bergerak ke bawah dan 
ke atas dan ke bawah. 


Penggunaan multiscene untuk animasi sederhana pada adobe flash 

Dari materi diatas siswa sudah mempelajari animasi sederhana 
(tweening) menggunakan scene 1 dan scene 2. Jika kita putar maka scene 1 dan 
scene 2 ini akan saling bersambungan. Dalam pengerjaannya seolah antar 
scene berdiri sendiri. Tapi ketika sudah menjadi file yang siap di jalankan dua 
scene ini adalah satu kesatuan yang utuh. Sehingga urutan seguence animasi 
nya adalah sebagai berikut: 


Scene 1 
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Scene 2 





Dan scene ini bisa dibuat lebih lagi, jika akan membuat produksi animasi 


yang panjang. 


c. Rangkuman. 

Pada aplikasi animasi 2D seperti adobe flash penggunaan scene 
dibutuhkan untuk mengedit animasi yang Panjang dan membaginya ke dalam 
beberapa bagian. Scene ini cocok digunakan bagi anda yang membuat 
presentasi, pembelajaran interaktif, game yang membutuhkan pembagian 
beberapa menu seperti opening, main menu, ending. Sebenarnya hanya dengan 
menggunakan 1 buah scene bisa dilakukan tetapi nanti framenya akan terlihat 
panjang sekali. Oleh karena itu apabila anda menggunakan beberapa 
menu sebaiknya gunakan scene tambahan/mutlti scene. 
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d. Tugas. 
Membuat MultiScene untuk animasi sederhana (tweening) 

Sebelum mengerjakan tugas peserta didik Mengamati dan memahami 
kembali uraian tentang langkah langkah penggunaan scene untuk animasi 
sederhana (tweening) pada adobe flash. Masing-masing siswa membuat animasi 
tweening dengan menggunakan Multiscene pada adobe flash. Kemudian secara 
bergantian masing-masing siswa mempresentasikan hasilnya didepan kelas. 

«11. Bacalah uraian materi diatas dengan teliti dan cermat. 
£ 1.2. Buatlah tweening motion menggunakan Multiscene pada adobe 
flash menggunakan software pengolah presentasi. 

1.3.  Presentasikan hasil ringkasan di depan kelas. 


e. Test Formatif. 

Dalam test ini setiap peserta didik wajib membaca dengan cermat dan 
teliti setiap butir soal dibawah ini. Kemudian berdasarkan uraian materi diatas 
tulislah jawabannya pada lembar jawaban test formatif yang telah disediakan. 

«9 3. Gambarkan dan jelaskan langkah langkah membuat animasi 
£ sederhana menggunakan Multiscene pada adobe flash 


4. Jelaskan kedudukan scene1 dan Scene lainya pada adobe flash, 


saat membuat animasi Multiscene 


f. Lembar Jawaban Test Formatif (LJ). 


LJ- 01 : Skema animasi sederhana menggunakan Multiscene pada flash 
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g. Lembar Kerja Peserta Didik. 
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a. Tujuan Pembelajaran. 
Setelah mengikuti kegiatan belajar 14 diharapkan peserta didik dapat: 
“ Memahami cara memberikan efek audio pada animasi 2 dimensi 


“ Membuat produk animasi yang dilengkapi dengan efek audio 


b. Uraian materi. 

1. Pengertian Audio 

Satu lagi unsur multimedia yang tidak kalah penting dalam 
membuat animasi adalah sound. Sound atau suara mampu memberikan nilai 
tambah pada suatu animasi. Selain bisa menjadikan animasi tampak lebih 
hidup, suara juga dapat membantu penikmat animasi lebih memahami pesan 
yang terkandung didalam animasi tersebut. 
Audio Dalam sistem komunikasi bercirikan video, sinyal elektrik digunakan 
untuk membawa unsur bunyi. Istilah ini juga biasa digunakan untuk 
menerangkan sistem-sistem yang berkaitan dengan proses perekaman dan 
transmisi yaitu sistem pengambilan/penangkapan suara, sambungan 
transmisi pembawa bunyi, amplifier dan lainnya. 
Berikut ini merupakan beberapa kemampuan yang dapat dihasilkan dari 


fasilitas pengolah suara milik flash, antara lain: 


e Sinkronisasi Antara suara dan animasi 
e# Memberikan efek fade-in dan fade-out pada suara 
e Menghasilkan perulangan pada suara 


e# Memberikan efek suara pada tombol 
2. Macam-Macam Audio 


Audiovisual Perangkat soundsistem yang dilengkapi dengan penampilan 


gambar, biasanya digunakan untuk presentasi, home theater, dsb. 
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Audio Streaming istilah yang dipergunakan untuk mendengarkan siaran 
secara live melalui Internet. Berbeda dengan cara lain, yakni men-download 
file dan menjalankannya di komputer kita bila download-nya sudah selesai, 
dengan streaming kita dapat mendengarnya langsung tanpa perlu 
mendownload file-nya sekaligus. Ada bermacam-macam audio streaming, 
misalnya Winamp (mp3), RealAudio (ram) dan liguid radio. 

Audio response Suara yang dihasilkan oleh komputer.Output pembicaraan 
yang dihasilkan komputer untuk menanggapi input jenis khusus, misalnya 
permintaan nomor telepon. 

Audio Oscillator Merupakan produk dari perusahaan Hewlett Packard yang 
pertama. Produk ini digunakan oleh Walt Disney Studios dalam pembuatan 
filmnya yang berjudul Fantasia. 

Audio Modem Riser Sebuah kartu plug-in untuk motherboard Intel yang 
memuat sirkuit audio dan atau sirkuit modem. AMR memuat fungsi-fungsi 


analog (kode-kode) yang dipelukan untuk operasi modem dan atau audio. 


3. Format-format audio 


« MP3 (MPEG Audio Layer 3), 
Salah satu berkas audio yang memiliki kompresi yang baik (meskipun 
bersifat lossy) sehingga ukuran berkas bisa memungkinkan menjadi 
lebih kecil. MP3 mengurangi bit yang diperlukan dengan menggunakan 
model psychoacoustic untuk menghilangkan komponen-komponen 
suara yang tidak terdengar oleh manusia. 


6« AMR (Adaptive Multi Rate) 
Jenis audio codec yang sudah terkompresi. Kualitas suara yang 
dihasilkan kurang bagus namun dapat dikonversi menjadi format MP3. 
Biasanya format ini dihasilkan dari rekaman ponsel. 


6» WAV (Waveform Audio) 
WAV merupakan format file audio yang dikembangkan oleh Microsoft 
dan IBM sebagi standar untuk menyimpan file audio pada PC, dengan 


menggunakan coding PCM (Plus Code Modulation). WAV adalah file 
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audio yang tidak terkompres sehingga seluruh sample audio disimpan 
semuanya di media penyimpanan dalam bentuk digital. Karena 
ukurannya yang besar, file WAV jarang digunakan sebagai file audio di 


Internet. 


CDA (CD Audio) 
Format Audio yang telah di joining ke CD, sehingga rata-rata file audio 
berekstensi ini hanya berukuran tidak lebih dari 1 kb. 


AAC (Advanced Audio Coding) 

Format audio yang menggunakan lossy compression (data hasil 
kompresi tidak bias dikembaliakan lagi ke data sebelum dikompres 
secara sempurna, karena ada data yang hilang). Format ini merupakan 
bagian standar Motion Picture Experts Group (MPEG), sejak standar 
MPEG-2 diberlakukan pada tahun 1997. Sample rate yang ditawarkan 
sampai 96 KHz-dua kali MP3. 


AIFF (Audio Interchange File Format) 

File AIFF merupakan format file audio standar yang digunakan untuk 
menyimpan data suara untuk PC dan perangkat audio elektronik 
lainnya, yang dikembangkan oleh Apple pada tahun 1988. Standar dari 
file AIFF adalah uncomressed code pulse-modulation (PCM), namun 
juga ada varian terkompresi yang dikenal sebagai AIFF AIFF-C atau 
aifc, dengan berbagai kompresi codec. 

MIDI 

Merupakan standar yang dibuat oleh perusahaan alat-alat music 
elektronik berupa serangkaian spesifikasi agar berbagai instrument 
dapat berkomunikasi. 

Dengan menggunakan format MIDI, perangkat elektronik seperti 
keyboard dan computer dapat melakukan sinkronisasi satu sama lain. 


Format Monkey's Audio 
Ekstensi : .ape, .apIl merupakan format file audio dengan kompresi 
lossless sehingga tidak mengurangi kualitas suara. Umumnya, sebuah 


file audio dengan format Monkey's Audio mempunyai ukuran lebih 
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besar 3-5 kali dibandingkan dengan format MP3 (pada bitrate 192 
Kb/s). Secara resmi, Monkey Audio hanya mendukung platform 
Windows, seperti yang ditulis di website resminya. Pada masa-masa 
mendatang, Monkey Audio akan mendukung untuk platform Linux dan 
Mac OS. Player yang dapat digunakan untuk menjalankan file format 


ini adalah Monkey's Audio. 


« Ogg Vorbis 
Ogg Vorbis merupakan satu-satunya format file yang terbuka dan 
gratis. Format lain yang disebutkan diatas umumnya dipatenkan dan 
pengembang peranti lunak atau pembuat peranti keras harus 
membayar lisensi untuk produk yang dapat memainkan file dengan 
format terkait, tapi untuk Ogg Vorbis tidak..Dari segi kualitas, kelebihan 
Ogg Vorbis adalah kualitas yang tinggi pada bitrate rendah 
dibandingkan format lain. Peranti lunak populer, Winamp dan pelopor 
pemutar MP3 portabel Rio sudah mendukung format ini dalam model 
terbarunya. Walaupun demikian dukungan peranti keras terhadap 


format ini masih jarang. 


« Real Audio 
Salah satu format yang biasa ditemukan pada bitrate rendah. Format 
dari Real Networks ini umumnya digunakan dalam layanan streaming 
audio. Pada bitrate 128 kbps ke atas RealAudio menggunakan standar 
AAC MPEG-4. 


4. Format file sound yang didukung oleh flash 


Tidak semua format file sound didukung oleh flash. Dengan demikina, 
hanya ada beberapa file suarayang dapat diinpor kedalam dokumen 


flash. Berikut ini merupakan format suarayang didukungoleh flash. 


e  ASND (windows atau macintosh). Ini merupakan format asli dari adobe 
soundbooth 
e  WAV (windows) 
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e AIFF (macintosh) 


e Mp3 (windows atau Macintosh) 


Jika memiliki guickTime versi 4 keatas dikomputer Anda, anda mengimpor 
file suara dengan format tambahan berikut. 


e AIFF (windows atau Macintosh) 

e Sound designer II (macintosh) 

e Sound Only gguickTime Movies (windows atau Macintosh) 
e Sun AU (windows atau Macintosh) 

e System / Sounds (Macintosh) 


e Wav (windows atau Macintosh) 


5, Cara Memasukkan Suara di Flash 


1. Pertama-tama kita buka program Flash buat document baru. 








Gambar 176. Buka program flash 
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2. klik library atau klik Crtl-L pada kyboard untuk membuka tab library.. 


gunanya adalah sebagai tempat file-file yang akan kita masukan nanti ke 


stage/bidang kerja. 








Gambar 177. Klik ctrl-L untuk membuka tab library 


3.Kemudian klik File-import-Import to Library. 








Gambar 178. Klik File-Import-Import to library 
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Gambar 179. Hasil 


4. setelah itu akan keluar seperti gambar diatas. Pilih file musik yang akan 
dimasukan kemudian klik Open. 
NB : musik yang umumnya dipakai adalah yang berekstensi .WAV/MP3. 


BD san t— Tuah  -——o.d be. Sa T—  & 





Gambar 180. Pilih file kemudian klik Open 


5. Sekarang file musik yang dipilih tadi sudah masuk ke library. Setelah 
musik masuk ke library. pada layer 1.klik kanan pada Timeline. pilih Insert 
Keyframe 

NB :mengenai besaran timeline yang akan dipakai disesuaikan dengan 
kebutuhan saja. disini hanya sebagai contoh diggunakan timeline ke-40 
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6. sekarang akan dimasukan musik yang ada di library ke stage. caranya 
adalah dengan cara klik pada layer 1 antara timeline ke-1 dan ke-40. 
setelah itu klik file musik yang ada di library kemudian drag ke stage/bidang 
kerja. Jika benar maka hasilnya akan nampak seperti gambar dibawah ini.. 








Gambar 181. File musik yang didrag ke stage/bidang kerja 


7.Nah musik telah berhasil dimasukan. Klik Crtl-Enter untuk test movie. 
Namun ini belum bisa dikatakan selesai 1006 karena masih ada 


pengaturan yang wajib untuk diketahui 





Gambar 182. Test movie/ctr--enter 


Seperti yang Nampak pada gambar diatas yang dilingkari merah. disana 
ada beberapa setingan untuk music yang kita masukan tadi. 
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Pada Effect, jika diklik maka akan muncul pilihan dengan berbagai fungsi 


yang berbeda, berikut fungsinya: 


None : tidak ada effect apa-apa. 

Left Channel : suara akan terdengar di speaker sebelah kiri saja. 
Right Channel : suara akan terdengar di speaker sebelah kanan 
saja. 

Fade Left to Right : suara akan terdengar dari speaker sebelah kiri 
ke sebelah kanan. 

Fade Right to Left : kebalikan dari Fade Left to Right, yaitu suara 
akan terdengar dari speaker sebelah kanan ke kiri. 

Fade In : volume akan semakin meningkat secara bertahap selama 
suara dimainkan. 

Fade Out : volume akan semakin menurun secara bertahap selama 
suara dimainkan 

Custom : suara dapat diedit sesuai selera dengan menekan tombol 
edit. 

event : suara dimainkan terus sampai selesai namun dengan syarat 
jumlah frame adalah 1 atau jumlah frame sama dengan panjang 
suara. 

start : suara dimainkan sampai selesai. 

stop : suara tidak dimainkan. 

stream : suara akan dimainkan sesuai dengan jumlah maksimal 
frame di timeline. 

Repeat : berapa banyak suara dimainkan tergantungan pilihan 
repeat yang dipilih. 


Loop : suara akan dimainkan secara terus menerus. 
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c. Rangkuman 


Satu lagi unsur multimedia yang tidak kalah penting dalam membuat 
animasi adalah sound. Sound atau suara mampu memberikan nilai tambah 
pada suatu animasi. Selain bisa menjadikan animasi tampak lebih hidup, 
suara juga dapat membantu penikmat animasi lebih memahami pesan yang 
terkandung didalam animasi tersebut. Audio Dalam sistem komunikasi 
bercirikan video, sinyal elektrik digunakan untuk membawa unsur bunyi. 
Istilah ini juga biasa digunakan untuk menerangkan sistem-sistem yang 
berkaitan dengan proses perekaman dan transmisi yaitu sistem 
pengambilan/penangkapan suara, sambungan transmisi pembawa bunyi, 
amplifier dan lainnya. Berikut ini merupakan beberapa kemampuan yang 
dapat dihasilkan dari fasilitas pengolah suara milik flash, antara lain: 
Sinkronisasi Antara suara dan animasi, Memberikan efek fade-in dan fade- 
out pada suara, menghasilkan perulangan pada suara, memberikan efek 
suara pada tombol. Tidak semua format file sound didukung oleh flash. 
Dengan demikina, hanya ada beberapa file suarayang dapat diinpor kedalam 
dokumen flash. Berikut ini merupakan format suara yang didukung oleh 
flash: ASND (windows atau macintosh). Ini merupakan format asli dari adobe 
soundbooth, WAV (windows), AIFF (macintosh), Mp3 (windows atau 
Macintosh) 


d. Tugas : Memasukkan 2 musik/ lagu di Flash 


Dalam kegiatan ini setiap peserta didik membuat 2 halaman flash yang 
didalamnya terdapat file musik. Berdasar uraian materi diatas lakukan langkah- 
langkah berikut: 
«& 11. Buka file baru pada software flash atau Ctrl-N. 
P 1.2. Masukkan music/lagu kedalam halaman flash sesuai langkah- 
langkah seperti dalam uraian diatas 
1.3.  Presentasikan hasil animasi yang telah dibuat siswa di depan 
kelas 
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e. Test Formatif. 
Dalam test ini setiap peserta didik membaca dengan cermat dan teliti setiap butir 
soal dibawah ini. Kemudian berdasarkan uraian materi diatas tulislah jawabannya 
pada lembar jawaban test formatif yang telah disediakan. 
« 1. Jelaskan pengertian dan fungsi sound pada flash? 
7 2. Jelaskan beberapa kemampuan yang dapat dihasilkan dari 
fasilitas pengolah suara milik flash ? 
3. Sebutkan dan jelaskan Format file sound yang didukung oleh 
flash? 


f. Lembar Jawaban Test Formatif (LJ). 


LJ- 01 : Pengertian dan fungsi sound pada flash 
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LJ- 02 : Beberapa kemampuan yang dapat dihasilkan dari fasilitas 


pengolah suara milik flash 
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g. Lembar Kerja Peserta Didik. 
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a. Tujuan Pembelajaran. 


Setelah mengikuti kegiatan belajar 15 diharapkan peserta didik dapat: 
“ Memahami cara memberikan efek audio pada animasi 2 dimensi 


“ Membuat produk animasi yang dilengkapi dengan efek audio 


b. Uraian materi. 
Cara menambahkan sound pada tombol di flash 


Berikut adalah langkah-langkah menambahkan sound pada interface dan event 
(kondisi) button: 


# Misal terdapat sebuah file flash dengan 2 layer. Layer 1 akan diisi 
background music, dan layer 2 diisi dengan tombol. 





8 Scene 1 


| Tneine | 









katahati oten haha atasan Kasie ai aw elit aan nian 













Na lindfps | 008 


SORKOPNTI 
eErKOUPOKm 








layer tombol berisi tombol btn 











Options tombol btn pada layer tombol 


Ll 


Gambar 183. 2 layer- 1.diisi background music , 2. Diisi tombol 
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« Untuk memasukkan file sound ke library, pilih file, import, import to 
library. 


Edit View Insert Modifv Text Commands Control Window Help 


















New... Ctrl--N Ra : 

Open... Ctr--O JGN Untitled-1" “ 

Open from Site... 

Open Recent » 

Close Ctrl 

Close All Ctrl Alt 

Save Ctrl--S 

Save and Compact 

Save As... Ctrl--Shift-4-S 

Save as Template... 

Save All | men ESA RA 
an v aoi |rdfs |o. 

Export @| Import to Library... 


Open External Library... Ctrl--Shift-O 
Publish Settings... Ctrl#-Shift4-F12 8 g 


Import Video... 
Publish Preview P 
Publish Shift#-F12 
Page Setup... 
Print... Ctrl-P 





Gambar 184. Cara memasukkan file sound ke library 


e Pilih file sound.. jika ingin memasukkan file sound lain, ulangi tahap 


sebelumnya. 
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Import to Library 33 





Look in: (& YA- Love Unlimited Instrumental -19 Best Inst “| @ t p far 


' @) 13-va-st james infirmary.mp3 
BD 1 14-va-suzanne.mp3 
My Recent &) 15-va-moonriver.mp3 
Documents @J 16-yva-this is my song.mp3 


— @) 1F-va-vaya con dios.mp3 
&: Gl 18-va-vesterday.mp3 
& 19-va-youre my world.mp3 


@linstrumental - instrumental - background music (sad piano) 2.mp3 
@lrelaxing instrumental music - sad piano 3.mp3 








-d 





Ie 


File name: 1 B-va-yesterday.mp3 “ | | Open 
Mp Network Files of type: LAI Files (“ v 











Gambar 185. Pemilihan sound yang akan dimasukkan 


e Klik ok, tunggu beberapa saat. 






Cancel 






Gambar 186. Langkah selanjutnya Loading sound 


e# File sound yang telah berhasil di import akan disimpan pada panel library. 
# Klik pada layer 1, background, untuk menyisipkan background music. 
Perhatikan panel properties, pada bagian sound, pilih file sound yang 


akan dimainkan. 
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Klik pada layer background 


file sound pada 
hbrary panel 
Pada panel praperties pilih 
sound file yang akan 
ditampilkan 






| Adbre 
1 Properties — Fiters | Parameters 


| IN Frame | Tweeni | None “ 


Labat tee: 





Tera: | Event “.. Repex 


Gambar 187. Panel properties pada bagian sound yang akan dimainkan 


#« Pengaturan efek sound dapat diatur pada bagian effect. 


Sound: 01 - Bukan Cinta Biasa.mp3 v 
EFfect:|| None 3 


Sync: | Event wi Repeat v“ | 1 | 























44 kHz Stereo 16 Bit 266.8 s 47070.7 kB 


Gambar 188. Pengaturan efek sound 


e Background musik sudah dapat dimainkan. Tekan Ctrl-Enter. 
# Untuk kasus menambahkan sound pada button, double klik pada button. 
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Klik 2 kali 
di tombol 


Gambar 189. Cara menambahkan sound pada button 


e Pilih kondisi button pada timeline (up-saat muncul, over-saat disorot, 
down—saat ditekan, hit-saat telah selesai ditekan). 


Pilih kondisi tombol Pilih file suara 
(up/over/down/hit) yang akan 
dimainkan 





Label type: Sync: Evene “| Repeat m1 & 


No sound setected 


Gambar 190. Kondisi button pada timeline 
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c. Rangkuman 


Berikut adalah langkah-langkah menambahkan sound pada interface dan event 
(kondisi) button: Misal terdapat sebuah file flash dengan 2 layer. Layer 1 akan 
diisi background music, dan layer 2 diisi dengan tombol. Untuk memasukkan file 
sound ke library, pilih file, import, import to library. Pilih file sound jika ingin 
memasukkan file sound lain, ulangi tahap sebelumnya. Klik ok, tunggu beberapa 
saat. File sound yang telah berhasil di import akan disimpan pada panel library. 
Klik pada layer 1, background, untuk menyisipkan background music. Perhatikan 
panel properties, pada bagian sound, pilih file sound yang akan dimainkan. 
Pengaturan efek sound dapat diatur pada bagian effect. Background musik 
sudah dapat dimainkan. Tekan Ctrl-Enter. Untuk kasus menambahkan sound 
pada button, double klik pada button. Pilih kondisi button pada timeline (up-saat 
muncul, over-saat disorot, down—saat ditekan, hit-saat telah selesai ditekan). 


d. Tugas : Membuat 3 tombol dan tambahkan sound 


Dalam kegiatan ini setiap peserta didik membuat 3 tombol dan tambahkan sound 
berdasar uraian materi diatas lakukan langkah-langkah berikut: 
« 11. Buka file baru pada software flash atau Ctrl--N. 
P 1.2. Buat 3 tombol dan tambahkan sound sesuai langkah-langkah 
seperti dalam uraian diatas 
1.3.  Presentasikan hasil animasi yang telah dibuat siswa di depan 
kelas 


e. Test Formatif. 

Dalam test ini setiap peserta didik membaca dengan cermat dan teliti setiap butir 

soal dibawah ini. Kemudian berdasarkan uraian materi diatas tulislah jawabannya 

pada lembar jawaban test formatif yang telah disediakan. 

£ 1. Jelaskan langkah-langkah menambahkan sound pada tombol di 
flash? 


2. Jelaskan langkah-langkah pengaturan efek sound di flash ? 
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f. Lembar Jawaban Test Formatif (LJ). 
LJ- 01 : langkah-langkah menambahkan sound pada tombol di flash 


171|Page 


Teknik Animasi 2 Dimensi 





LJ- 02 : langkah-langkah pengaturan efek sound di flash 
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g. Lembar Kerja Peserta Didik. 


173 |Page 


Teknik Animasi 2 Dimensi 








a. Tujuan Pembelajaran. 


Setelah mengikuti kegiatan belajar 16 diharapkan peserta didik dapat: 
“ Memahami cara memberikan efek audio pada animasi 2 dimensi 
“ Membuat produk animasi yang dilengkapi dengan efek audio 


b. Uraian materi. 


Memasukkan suara, membuat objek/gambar pause, stop, dan play. 


1. Open MacromediaFlash 8 --- File -- New. 
memasukkan suara dengan mengklik File --- Import --3 Import to library... 








ai Tedan de Lite Eegin : S ie brani . Merlla £ reda 
69 Macromedia Flash Professional 8 - (Untitled-10”) 
(Fe) Edit View Insert Modify Text Commands Control Window Help 
















New... Ctrl N 
Open... Ctri-O 

Open from Site... 

Open Recent , | | 40 4 
Oke Ciel W 

Clote AN Ceri Ae 

Save CS 

Save and Compact Ol Ia Te 3 j120ip3 | Ola « - 

Save As.. Cirls Shifts5 

Save as Template... 

Save Al 

Import , Import to Siage... Ctl-R 

Gpor , Import to Libenry... 

Pubhsh Settings... Ciri. Shifts F12 Open External Library... Ciris ShdtsO 

Pubtish Preview s Import Video... 

Pubhsh Shift-F12 

Dewe Settr 35 

Page Setup... 

Print. Ctr-P 

Send... 


Document Sine: | 550 x 400 poceis | Badkground: |, Frame rater 12 


Gambar 191. Muka macromedia Flash 8 pada saat memasukkan lagu 
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2. setelah mengimport lagu, pada panel library akan muncul gambar seperti ini, 


klik kanan musik yang sudah dimasukkan tadi dan pilihlah "linkage..." 
Magi 


en eAaARARA,A,,oA,e Wira ikan 








pb Color 
s 33X 
p Align & Info & Transform 
8 Hr SPAN Ta TA IT 
w 35 100 10S 1 |Untitled-10 “| a ls 
ai 14 tems 








Name z 
| playback rounded O 
Cut 
Copy 


Paste 


| Rename 


Lu 





Duplicate 

Move to New Folder 
Delete 

Edit 

Edit with... 
Properties... 


1 Linkage... 


Play 
Update... 
Export Settings... 











Gambar 192. Setelah dimasukkan lagu dan edit di panel library 
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3. Setelah itu akan muncul gambar seperti ini, masukkan nama identifier "musik" 
sebagai nama yang akan dipanggil pada actions frame nanti. dan jangan lupa 


klik Export for actionScript. 





Y Kapat tor AcbanSonat 





Export for runtme sharng 






Y Export n Srat tama 





Gambar 193. Setelah memasukkan nama identifier 


sesudah memasukkan suara, buat tombol. agar terlihat seperti Winamp. 
membuat gambar pause, stop, dan play (bisa di ambil melalui,windows --- 
common libraries ---» button) dengan cara di drag ke layar kerja, jangan lupa, di 


drag! 











Gambar 194. Cara memasukkan suara 
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Gambar stop 


1. klik dan seleksi tombol stop dengan menggunakan shortcut F8 





Gambar 195. Seleksi tombol stop dengan menggunakan shortcut F8 


2. pada name masukkan nama "stop btn" dan type "button" untuk memanggil 
pada area action frame. 


Type: Movie dip 


Gambar 196. Memasukkan nama dan tipe button 





3. setelah ini jangan lupa mengklik tombol stop dan memasukkan nama 
"stop btn" pada instance name yang berada pada panel properties dengan 
menggunakan shortcut ctrl-F3. 








AU 
5 Button "| Iretancsof: — rounded grey stop Color: None "| 
| swap... | | Tracks button " 


Ya: 28.0 Xx: 100,1 





Instance name 


Gambar 197. Memasukkan nama “stop btn” pada instance name 
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Gambar Play 


1. Klik dan seleksi tombol stop dengan menggunakan shortcut F8 








Gambar 198. Seleksi tombol dengan menggunakan shortcut F8 


2. Pada name masukkan nama "play btn" dan type "button" untuk memanggil 


pada area action frame. 





Gambar 199. Memasukkan nama "play btn” type “button” 


3. Setelah ini jangan lupa mengklik tombol play dan memasukkan nama 
"play btn" pada instance name yang berada pada panel properties dengan 
menggunakan shortcut ctrl-F3. 









at 


v Bj ai 





"|| Instance of: rounded grey Ne AN AN Pa pan Color: None "| 
2 ah name . 
W: 23.0 x: Blend: Normal "| 


Gambar 200. Memasukkan nama “play btn” pada instance name dengan 


menggunakan shoutcut ctrl-F3 
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Gambar pause 


1. Klik dan seleksi gambar pause dengan menggunakan shortcut F8 





Gambar 201. Seleksi gambar pause dengan menggunakan shortcut F8 


2. Pada name masukkan nama "pause btn" dan type "button" untuk memanggil 


pada area action frame. 


kene pace br 


Type: “ Movie dip Registration: 228 


(3 Graphkc 





Gambar 202. Memasukkan nama “pause btn” type “button” 


3. Setelah ini jangan lupa mengklik tombol pause dan memasukkan nama 
"pause btn" pada instance name yang berada pada panel properties dengan 
menggunakan shortcut ctrl-F3. 
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Color: | Nani - 


Oikend: | Normal - 





Gambar 203. Memasukkan nama “play btn” pada instance name dengan 


menggunakan shoutcut ctrl-F3 


kode yang dimasukkan pada actions script dengan mengklik scene pada layer 1 
lalu menggunakan shortcut F9. (jangan lupa mengklik scene atau layar kerja, 
bukan mengklik tombol, tetapi mengklik scene atau layar kerja, lalu F9 dan 


masukkan kode ini) 


Pause - false: 


Stop - false, 
function mainkanMusik0) | 


musik — new Sound): 
musik.attachSound( "musik! ): //('musik" ini adalah nama lagu atau 
suara yang dimasukkan pada linkage properties di atas "identifier”) 
musik.start(0,999): 
J 
pause btn.onPress - function() | 
posisi —- Math.floor(musik.position/1000): 
musik.stop 0): 
Pause - true: 
5 
play btn.onPress - function() | 
if (Stop) | 
musik.start(0,1): 
Pause - false: 
Stop - false: 
J 
if (Pause) ( 
musik.start(posisi,1): 
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Pause - false: 


J 

musik.onSound Complete — function() | 
mainkanMusik(): 

5: 


8 
stop btn.onPress - function/() | 
Stop - true, 


stopAllSoundsI): 
:: 


mainkanMusik0): 


c. Rangkuman 


Open MacromediaFlash 8 --5 File -» New., memasukkan suara dengan 
mengklik File --- Import --- Import to library. setelah mengimport lagu, pada 
panel library akan muncul gambar seperti ini, klik kanan musik yang sudah 


dimasukkan tadi dan pilihlah "linkage..." setelah itu akan muncul gambar ini, 
masukkan nama identifier "musik" sebagai nama yang akan dipanggil pada 
actions frame nanti. dan jangan lupa klik Export for actionScript. sesudah 
memasukkan suara, buat tombol. agar terlihat seperti  Winamp. 
membuat gambar pause, stop, dan play. klik dan seleksi tombol stop dengan 
menggunakan shortcut F8. Pada name masukkan nama "stop btn" dan type 
"button" untuk memanggil pada area action frame. Setelah ini jangan lupa 
mengklik tombol stop dan memasukkan nama "stop btn" pada instance name 
yang berada pada panel properties dengan menggunakan shortcut ctrl-F3. Klik 
dan seleksi tombol stop dengan menggunakan shortcut F8. Pada name 
masukkan nama "play btn" dan type "button" untuk memanggil pada area action 
frame. Setelah ini jangan lupa mengklik tombol play dan memasukkan nama 
"play btn" pada instance name yang berada pada panel properties dengan 
menggunakan shortcut ctr-F3. Masukkan kode pada actions script dengan 
mengklik scene pada layer 1 lalu menggunakan shortcut F9. 


181 | Page 








Teknik Animasi 2 Dimensi 


d. Tugas : Membuat produk animasi yang dilengkapi dengan efek audio 


Dalam kegiatan ini setiap peserta didik membuat produk animasi yang dilengkapi 
dengan efek audio berdasar uraian materi diatas lakukan langkah-langkah 
berikut: 
«& 11. Buka file baru pada software flash atau Ctrl--N. 
P 1.2. Membuat produk animasi yang dilengkapi dengan efek audio 
sesuai langkah-langkah seperti dalam uraian diatas 
1.3.  Presentasikan hasil animasi yang telah dibuat siswa di depan 
kelas 


e. Test Formatif. 
Dalam test ini setiap peserta didik membaca dengan cermat dan teliti setiap butir 
soal dibawah ini. Kemudian berdasarkan uraian materi diatas tulislah jawabannya 
pada lembar jawaban test formatif yang telah disediakan. 
« A1. Jelaskan langkah-langkah membuat tombol play dilengkapi 
? dengan efek audio di flash? 
2. Jelaskan kode pada actions script untuk memasukkan suara pada 
objek/gambar pause, stop? 


f. Lembar Jawaban Test Formatif (LJ). 
LJ- 01 : langkah-langkah membuat tombol play dilengkapi dengan efek 
audio di flash 
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LJ- 02 : Kode pada actions script untuk memasukkan suara pada 


objek/gambar pause, stop 
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g. Lembar Kerja Peserta Didik. 
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a. Tujuan Pembelajaran. 


Setelah mengikuti kegiatan belajar 17 diharapkan peserta didik dapat: 
v Jenis-jenis format produk animasi 2 dimensi 
v Pembuatan produk animasi 2 dimensi dalam beberapa format 


b. Uraian materi. 

1. Berbagai macam format gambar antara lain : 

a. TIF (Tagged Image Format File) 

Format file ini mampu menyimpan gambar dengan kualitas hingga 32 bit. Format 
file ini juga dapat digunakan untuk keperluan pertukaran antar platform (PC, 
Machintosh, dan Silicon Graphic). Format file ini merupakan salah satu format 
yang dipilih dan sangat disukai oleh para pengguna komputer grafis terutama 
yang berorientasi pada publikasi (cetak). Hampir semua program yang mampu 
membaca format file bitmap juga mampu membaca format file TIF-. 


b. JPG / JPEG (Joint Photographic Experts Assemble) 


JPG adalah jenis data yang dikembangkan oleh Joint Photographic Experts 
Assemble (JPEG) yang dijadikan standar untuk para fotografer profesional. 
Seperti metode yang digunakan oleh format ZIP yang digunakan untuk 
menemukan pengulangan (redundancy) dalam data untuk kemudian dikompresi, 
JPG mengompresi data gambar dengan cara mengurangi bagian-bagian dari 
gambar untuk memblok pixel dalam gambar tersebut. Kompresi JPG mempunyai 
kekurangan yang bersifat permanen, namun teknologi ini hanya digunakan untuk 
menyimpan data yang besar di media penyimpanan yang terbatas, bukan untuk 


manipulasi foto. 


JPG sudah digunakan dan menjadi standar gambar di internet karena ia bisa 
dikompresi hingga ukuran kecil. Data JPG tertentu bisa dikompres dengan rasio 
perbandingan 2:1 sampai paling tinggi 100:1, tergantung pengaturan yang anda 


berikan. Sewaktu koneksi internet yang tersedia di bumi ini masih berupa koneksi 
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dial-up, JPG adalah satu-satunya jenis data yang bisa dikirimkan dan dilihat 
secara bebas. 


File JPG menggunakan teknik kompresi yang menyebabkan kualitas gambar 
turun (lossy compression), maka format gambar ini tidak terlalu baik untuk 
digunakan menyimpan gambar pajangan atau artistik. Setiap kali menyimpan ke 
tipe JPG dari tipe lain, ukuran gambar biasanya mengecil, dan kualitasnya turun 
dan tidak dapat dikembalikan lagi. Ukuran file BMP dapat turun menjadi seper 
sepuluh setelah dikonversi menjadi JPG. Meskipun dengan penurunan kualitas 
gambar, pada gambar-gambar tertentu (misalnya pemandangan), penurunan 
kualitas gambar hampir tidak terlihat mata. 


File JPG cocok digunakan untuk gambar yang memiliki banyak warna, misalnya 
foto wajah dan pemandangan dan tidak cocok digunakan untuk gambar yang 
hanya memiliki sedikit warna seperti kartun atau komik. 


JPG juga bukan media ideal untuk penggunaan typography, crisp line, atau 
bahkan hasil fotografi dengan sudut yang tajam, karena obyek itu kadang 
menjadi samar/blur. Memang lebih enak karena file ini sangat umum dan sudah 


sangat memasyarakat. 


JPG mendukung 24-bit RGB dan CMYK, dan 8-bit Grayscale. Tidak disarankan 
untuk Anda menggunakan palet CMYK dalam format JPG. Perlu dicatat juga 
bahwa Grayscale tidak banyak dikompres jika dibandingkan dengan versi 


berwarnanya. 


File JPG cocok digunakan untuk : 


« Gambar yang memiliki banyak warna, misalnya foto wajah dan 
pemandangan. 

« Gambar yang memiliki gradien, misalnya perubahan warna yang 
perlahan-lahan dari merah ke biru. 
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c. GIF (Graphics Interchange Format) 


GIF, sama seperti JPG, adalah format gambar yang sudah cukup lama 
digunakan dan salah satu yang umum dipakai di internet. GIF adalah 
kepanjangan dari Graphics Interchange Format dan sama-sama memiliki 
kompresi seperti format gambar TIFF. Teknologi ini pernah kontroversial karena 
isu pemaksaan hak paten tapi akhirnya beres juga karena semua paten yang 
didaftarkan sudah habis masa aktifnya. 


GIF secara alami adalah gambar dengan 8-bit warna, berarti mereka dibatasi 
oleh palet sebanyak 256 jenis warna, yang dapat dipilih dari model RGB dan 
disimpan ke Color Look Up Tablet (CLUT), atau sederhananya “Color Table". 
Mereka itu sejatinya adalah palet warna standar, seperti palet “Web Safe". 


Selain bisa transparansi, GIF juga mendukung animasi gambar yang membatasi 
tiap form nya pada 256 warna standar. Dan karena sifatnya yang tidak pecah- 
pecah, GIF bisa digunakan untuk menjaga baris dalam tipografi tetap rapi, dan 
juga bentuk-bentuk geometri, tapi sebaiknya menggunakan format yang memang 
diperuntukkan untuk vektor grafis seperti SVG atau Al (Adobe Illustrator). 


GIF tidak cocok untuk digunakan dalam fotografi modern, atau untuk 
penyimpanan data gambar yang terbatas. Pada ukuran kecil dengan tabel warna 
yang sangat terbatas, gambar GIF dapat berukuran lebih kecil daripada JPG. 
Tapi dalam ukuran yang umum, gambar dengan format JPG dapat berukuran 
lebih kecil dibanding GIF. Jadi sebaiknya menggunakan JPG saja. 


GIF merupakan format grafis yang sering digunakan pada desain web. GIF 
memiliki kombinasi warna lebih sedikit dibanding JPEG, tetapi mampu 
menyimpan grafis dengan latar belakang transparan ataupun dalam bentuk 
animasi sederhana. 


Format GIF mendukung penggunaan multiple-bitmap dalam satu file sehingga 
dapat menghasilkan gambar animasi dan merekam penggunaan Transparency 
Masking. GIF juga baik untuk menampilkan gambar dengan komposisi yang tidak 
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menggunakan terlalu banyak warna, seperti gambar kartun. Sementara itu, GIF 
tidak cocok digunakan untuk menampilkan foto. 


GIF menggunakan metode Lossless Compression, untuk membuat ukuran file 
sekecil mungkin. Lossless Compression adalah kompresi yang tidak mengurangi 
kualitas pada gambar, namun dapat memperkecil besarnya jumlah file, jadi tidak 
ada penghilangan data pada saat dilakukan kompresi. Meskipun demikian, akan 
terjadi penurunan jumlah warna menjadi 256, sehingga sering membuat gambar 
yang kaya warna seperti pemandangan menjadi tidak realistis. 
File GIF cocok digunakan untuk gambar dengan jumlah warna sedikit (dibawah 
256), gambar yang memerlukan perbedaan warna yang tegas seperti logo tanpa 
gradien, gambar animasi sederhana seperti banner-banner iklan, header, dan 
sebagainya. Tidak cocok digunakan untuk gambar yang memiliki banyak warna 
seperti pemandangan, gambar yang didalamnya terdapat warna gradien atau 
semburat. 


Pada program MS Paint, tidak ada fasilitas penyesuaian warna yang digunakan 
(color table) sehingga menyimpan file GIF di MS Paint seringkali menghasilkan 
gambar yang terlihat rusak atau berubah warna. Pada program pengolah gambar 
yang lebih baik, seperti Adobe Photoshop, color table bisa diatur otomatis atau 
manual sehingga gambar tidak berubah warna atau rusak. 


File GIF cocok digunakan untuk : 


« Gambar dengan jumlah warna sedikit (dibawah 256). 

e« Gambar yang memerlukan perbedaan warna yang tegas seperti logo 
tanpa gradien. 

« Gambar animasi sederhana seperti banner-banner iklan, header, dan 
sebagainya. 

e Print shoot (hasil dari print screen) dari program-program simple dengan 
jumlah warna sedikit. 

« Gambar Grayscale memiliki palet 8-bit juga, jadi sah-sah saja/sebaiknya 
disimpan dalam format GIF. 
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File GIF tidak cocok digunakan untuk : 


e Gambar yang memiliki banyak warna seperti pemandangan. 
e« Gambar yang didalamnya terdapat warna gradien atau semburat. 


d. PNG (Portable Network Graphics) 


PNG adalah kepanjangan dari Portable Network Graphics atau bisa diplesetkan 
menjadi “PNG-Not-GIF”. Dikembangkan sebagai alternatif lain untuk GIF, yang 
menggunakan paten dari LZW—algoritma kompresi. PNG adalah format gambar 
yang sangat baik untuk grafis internet, karena mendukung transparansi didalam 
perambah (browser) dan memiliki keindahan tersendiri yang tidak bisa diberikan 
GIF atau bahkan JPG. Bisa disebut sebagai salah satu format yang merupakan 
gabungan dari format JPG dan GIF. Untuk tipe ini mampu untuk gradiasi warna. 


Karena sifat transparannya yang tidak pecah-pecah, PNG yang masuk kelas 24- 
bit ini cocok untuk membuat screenshoot. la bisa mereproduksi gambar desktop 
dari tiap piksel ke piksel secara detil. PNG juga mendukung kelas 8-bit seperti 
GIF, sekaligus 24-bit seperti JPG. Ia juga tidak pecah-pecah, bisa mengkompresi 
gambar dari proses fotografi tanpa banyak mengurangi kualitas gambarnya. 
Namun PNG cukup besar ukurannya diantara JPG dan GIF, serta tidak didukung 
oleh perambah / browser yang lama. 


Tipe file PNG merupakan solusi kompresi yang powerful dengan warna yang 
lebih banyak (24 bit RGB 4 alpha). Berbeda dengan JPG yang menggunakan 
teknik kompresi yang menghilangkan data, file PNG menggunakan kompresi 
yang tidak menghilangkan data (lossles compression). Kelebihan file PNG adalah 
adanya warna transparan dan alpha. Warna alpha memungkinkan sebuah 
gambar transparan, tetapi gambar tersebut masih dapat dilihat mata seperti 
samar-samar atau bening. File PNG dapat diatur jumlah warnanya hingga 64 bit 
(true color - alpha) sampai indexed color 1 bit. Dengan jumlah warna yang sama, 
kompresi file PNG lebih baik daripada GIF, tetapi memiliki ukuran file yang lebih 
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besar daripada JPG. Kekurangan tipe PNG adalah belum populer sehingga 
sebagian browser tidak mendukungnya. 


Format PNG ini diperkenalkan untuk menggantikan format GIF. PNG mempunyai 
faktor kompresi yang lebih baik dibandingkan dengan GIF (kurang lebih 546-254 
lebih baik dibanding format GIF). Tetapi ada satu fasilitas dari GIF yang tidak 
terdapat pada PNG format yaitu dukungan terhadap penyimpanan multi format 
untuk keperluan animasi. Untuk keperluan pengolahan gambar, meskipun format 
PNG bisa dijadikan alternatif selama proses pengolahan grafis namun format 
JPEG masih menjadi pilihan yang lebih baik. 


File PNG cocok digunakan untuk : 


e Gambar yang memiliki warna banyak 


e Gambar yang mau diedit ulang tanpa menurunkan kualitas. 
File PNG tidak cocok digunakan untuk: 


« Gambar yang jika dikompress dengan JPG hampir-hampir tidak terlihat 


penurunan kualitasnya (misal : pemandangan) 
e. BMP (Bitmap) 


Bitmap adalah representasi dari citra grafis yang terdiri dari susunan titik (pixel) 
yang tersimpan di memori komputer. Nilai setiap titik diawali oleh satu bit data 
(untuk gambar hitam putih) atau lebih (untuk gambar berwarna). Kerapatan titik- 
titik tersebut dinamakan resolusi, yang menunjukkan seberapa tajam gambar ini 
ditampilkan, ditunjukkan dengan jumlah baris dan kolom (contoh 1024x 768). 


Untuk menampilkan citra bitmap pada monitor atau mencetaknya pada printer, 
komputer menterjemahkan bitmap ini menjadi pixel (pada layar) atau titik tinta 
(pada printer). Beberapa format file bitmap yang populer adalah BMP, PCX dan 
TIFF. 


Gambar bitmap sangat bergantung pada resolusi. Jika gambar diperbesar maka 


gambar akan tampak kurang halus atau pecah, sehingga mengurangi detailnya. 
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Selain itu gambar bitmap akan mempunyai ukuran file yang lebih besar. Semakin 


besar resolusi gambar akan semakin besar pula ukuran filenya. 


Gambar dengan tampilan 100” Gambar dengan tampilan 50096 akan 
mempunyai perbedaan yakni biasanya kalau pada gambar yang berukuran 
100Y6, maka gambar masih terlihat jernih. Namun pada gambar yang dizoom 
sampai dengan 500” maka gambar akan tampk tidak tajam lagi dan terkesan 


membentuk kotak-kotak yang itu merupakan pixel. 


Contoh software yang berbasis bitmap adalah Adobe Photoshop, Paint, 
CorelPhotoPaint, dan lain-lain. 


f. TIFF (Tagged Image Format File) 


TIFF merupakan format gambar terbaik dengan pengertian bahwa semua data 
dan informasi (data RGB, data CMYK, dan lainnya) yang berkaitan dengan 
koreksi atau manipulasi terhadap gambar tersebut tidak hilang. Format TIFF 
biasa digunakan untuk kebutuhan pencetakan dengan kualitas gambar yang 
sangat tinggi sehingga ukuran berkas untuk format ini biasanya sangat besar, 
karena dalam file ini gambar tidak dikompresi. Format ini mampu menyimpan 
gambar dengan kualitas hingga 32 bit. Format berkas TIFF juga dapat digunakan 
untuk keperluan pertukaran antar platform (PC, Macintosh, dan Silicom Graphic). 


Format ini juga mudah digunakan untuk transfer antar program. 


2. Macam — macam Format ANIMASI 2D dengan menggunakan aplikasi 
Flash sbb: 

« Dalam flash ada 2 format yang akan otomatis terbuat jika anda membuat 
sebuah animasi, yaitu ” fla” dan” .swf ”. File yang ber-extensi .fla adalah 
format asli pada Flash yang di dalamnya menyimpan layer — layer dan 
frame-frame . Sedangkan file yang ber-extensi .swf adalah file yang 
terbentuk jika anda melakukan test movie , .swf adalah sebuah file project 
yang menampilkan animasi yang ukurannya lebih kecil dibanding file 


animasi 2d lainya. 
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« Dalam flash juga menyediakan jasa untuk meng-export animasi menjadi 


video, juga dapat di publish menjadi sebuah aplikasi (.exe) 


3. Mem-publish File Flash 


Terdapat fasilitas untuk export, kita juga bisa mem-publish file tersebut menjadi 
berbagai pilihan format, seperti Windows projector, html, dan lain-lain. Untuk 
melakukannnya, hanya perlu men-setting status publikasinya. Walaupun 
dipublish dalam format html, action script-nya tetep bisa jalan semuanya. Akan 
tetapi jika ingin menjadikan file seperti gif / video, action script-nya mungkin ada 
yang tidak jalan. Langkah-langkah untuk mempublish file flash menjadi exe yaitu: 


Buka file flash yang sudah dimiliki, tentunya dalam bentuk file aslinya. 
b. Klik File - Publish Setting 






# Macromedia Flash Professional f 
AN Edt Yew Irset Modify Tect 1 






AA. CirHH 


“ha Al daa 


Publkh Settings... Ctrk-Shifte Fiz 





Ebhah Shift F1 3 


ar sa LirHF 


Gambar 204. Buka file flash yang sudah dimiliki 


c. Jika belum pernah meng-utak-utik hal ini, pasti akan mendapatkan 


settingan default-nya yang berupa tipe Flash dan HTML. 
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Publish Settings 


Curert protie: RTA “| 5. 210 


ai 
Formats | Flash (| HTML 




















Type: Fe: 
Flash Law loading. Pp 
HTIAL html oading.html Pi 


Gambar 205. Muka settingan default-nya yang berupa tipe Flash dan 
HTML 


d. Pada publish settings bisa ditambah / dikurangi settingannya, misal 
tambahkan aja Windows Projector 
e. Klik Publish. 


Lea 


Cuman cook | Oa mudik 


“—— —— 
Porrats | niseh. 1 peran 


Trpe 

Flash Lam 
Kelam £. wrn 
TGIF Insya Lan 
JPt3 Innga (ipa) 


“Teras Iruga Ccog! 





Gambar 206. Tampilan publish 


f. Jika sudah, untuk meng-update hasil settingan, cukup klik F12 pada 
keyboard 
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c. Rangkuman 


Dalam flash ada 2 format yang akan otomatis terbuat jika anda membuat 
sebuah animasi, yaitu ” fla” dan” .swf ”. File yang ber-extensi .fla adalah format 
asli pada Flash yang di dalamnya menyimpan layer — layer dan frame-frame . 
Sedangkan file yang ber-extensi .swf adalah file yang terbentuk jika anda 
melakukan test movie , .swf adalah sebuah file project yang menampilkan 
animasi yang ukurannya lebih kecil dibanding file animasi 2d lainya.Flash juga 
menyediakan jasa untuk meng-export animasi menjadi video, juga dapat di 
publish menjadi sebuah aplikasi (.exe) 


d. Tugas : Membuat format file exe untuk animasi yang sudah pernah 
dibuat 


Dalam kegiatan ini setiap peserta didik membuat format file exe untuk animasi 
yang sudah pernah dibuat berdasar uraian materi diatas lakukan langkah- 
langkah berikut: 
«& 11. Buka file baru pada software flash atau Ctrl-N. 
P 1.2. Membuat format file exe untuk animasi yang sudah pernah dibuat 
sesuai langkah-langkah seperti dalam uraian diatas 
1.3.  Presentasikan hasil animasi yang telah dibuat siswa di depan 
kelas 


e.Test Formatif. 
Dalam test ini setiap peserta didik membaca dengan cermat dan teliti setiap butir 
soal dibawah ini. Kemudian berdasarkan uraian materi diatas tulislah jawabannya 
pada lembar jawaban test formatif yang telah disediakan. 
«? 1. Jelaskan macam — macam format ANIMASI 2D dengan 
P menggunakan aplikasi Flash 
2. Jelaskan langkah-langkah Mem-publish File exe di Flash? 
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f.Lembar Jawaban Test Formatif (LJ). 
LJ- 01 : macam — macam format ANIMASI 2D dengan menggunakan 


aplikasi Flash 
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g.Lembar Kerja Peserta Didik. 
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a. Tujuan Pembelajaran. 

Setelah mengikuti kegiatan belajar 18 diharapkan peserta didik dapat: 
v Jenis-jenis format produk animasi 2 dimensi 
v Pembuatan produk animasi 2 dimensi dalam beberapa format 


b. Uraian materi. 

Mem-publish fla menjadi GIF 

Macromedia Flash 8 merupakan salah satu produk macromedia yang difungsikan 
untuk membuat animasi sederhana. Berikut ini adalah cara mem-publish fla ( 


yaitu file macromedia flash format) menjadi GIF : 


e Pilih menu File -5- Publish Setting atau Ctrl-Shift-F12 setelah itu akan 


muncul gambar di bawah ini. 


Publish Settings 
Current profile: Default “dut aj Oei 


Formats (Flash | GIF” | 


Type: File: 

Gelrlash Cw) Samurai X.swf 
Jar (.htred) SAmurai X,html 
(MIGIF Image C.0if) SAmurai X. gif 
(“)peG image (.jpa) SAmurai X.ipg 
(PNG Image (png) Samurai X.png 
(vi windows Projector (.exe) | SAmurai X.exe 
| “Imacintosh Projector SAmurai X.hap 
(“ToOukkTime (.mov) SAmurai X.mov 


(run Joox J( carca ) 





Gambar 207. Cara mempublish fla 
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Publish Settings 


Current profile: Defauk 


Formats Flash GIF 


Iv) Match movie 
5 Oak (@) Loop contirnusy 
(0) dremated CO9Repeat ting 
: Moptimize colors |) Onbrer sobds 
Ivl Intertace (“| Remove gradents 
Iv) Senooth 
Trarepareek: 0 
Ditrrer: 
Palette Type: $ 
Max colors: 255 


Palette: 





Gambar 208. Muncul menu tabulasi gif setelah dicentang 


Klik centang pada menu gif, maka akan mucul menu tabulasi gif seperti 
pada gambar di atas. 


Setingan pada menu Playback merupakan opsi yang menentukan file gif 
tersebut dibuat bergerak atau tidak, 

» Pilih static untuk image gif yang bersifat tetap (tak bergerak), 

» Pilih animated untuk gif yang bersifat bergerak (animated). 


Jika memilih Animated maka muncul lagi menu Loop continuously atau 
repeat. Maksudnya menu Loop continuously adalah perulangan yang 
terus menerus, sedangkan menu Repeat adalah untuk banyaknya 
perulangan. Silahkan tentukan perulangannya. 


Untuk menghasilkan GIF animasi, pilihlah menu seperti gambar yang 
saya contohkan diatas pada menu tabulasi GIF. 
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Keterangan untuk menu Option : 


» 


menu Optimize Colors, klik centang untuk penghapusan warna- 
warna yang tidak digunakan dari file GIF, 

menu Interlace, klik centang untuk membuat file diekspor dalam 
sebuah browser, 

menu Smooth, klik centang untuk memperhalus warna bitmap yang 
diekspor sehingga hasil tampilan memiliki kualitas yang "sip", 

menu Dither Solids, klik centang untuk menggunakan hanya warna 
solid (bukan gradien), 

menu Remove gradient, klik centang untuk menghilangkan gradient 


warna. 


Keterangan menu Transparant : 


» 


Opague : untuk membuat agar background tampil dengan warna 
solid, 

Transparant : untuk membuat background tampil dengan warna 
transparant, 


Alpha : untuk mengatur transparansi warna, 


Untuk menu Dither ada 3 pilihan None, Ordered, Diffusion. menu ini 


merupakan menu untuk settingan warna pengganti ada atau tidak. Saran 


pilih diffusion. 


Untuk menu Palette Type adalah untuk mengatur warna palette image. 


Silahkan pilih Web 216, Adaptive, Web Snap Adaptive, ataupun custom. 


Saran pilih adaptive. 


Tekan tombol publish untuk mencetak hasil Flash ke dalam GIF 
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c. Rangkuman 


Klik centang pada menu gif, maka akan mucul menu tabulasi gif seperti pada 
gambar di atas. Setingan pada menu Playback merupakan opsi yang 
menentukan file gif tersebut dibuat bergerak atau tidak, Pilih static untuk image 
gif yang bersifat tetap (tak bergerak) atau Pilih animated untuk gif yang bersifat 
bergerak (animated). Jika memilih Animated maka muncul lagi menu Loop 
continuously atau repeat. Maksudnya menu Loop continuously adalah 
perulangan yang terus menerus, sedangkan menu Repeat adalah untuk 
banyaknya perulangan. Silahkan tentukan perulangannya. Untuk menghasilkan 
GIF animasi, pilihlah menu seperti gambar yang saya contohkan diatas pada 
menu tabulasi GIF. 


d. Tugas : Membuat format file gif untuk animasi yang sudah pernah 
dibuat 
Dalam kegiatan ini setiap peserta didik membuat format file gif untuk animasi 
yang sudah pernah dibuat berdasar uraian materi diatas lakukan langkah- 
langkah berikut: 
«& 11. Buka file baru pada software flash atau Ctrl--N. 
P 1.2. Membuat format file gif untuk animasi yang sudah pernah dibuat 
sesuai langkah-langkah seperti dalam uraian diatas 
1.3.  Presentasikan hasil animasi yang telah dibuat siswa di depan 
kelas 


e. Test Formatif. 
Dalam test ini setiap peserta didik membaca dengan cermat dan teliti setiap butir 
soal dibawah ini. Kemudian berdasarkan uraian materi diatas tulislah jawabannya 
pada lembar jawaban test formatif yang telah disediakan. 
«& A1. Jelaskan pengertian Loop continuously? 
£ 2. Sebutkan dan Jelaskan Keterangan untuk menu Option 
3. Sebutkan dan Jelaskan 3 Keterangan menu Transparant? 
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f. Lembar Jawaban Test Formatif (LJ). 


LJ- 01 : Pengertian Loop continuously 
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g. Lembar Kerja Peserta Didik. 
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